공정 최적화 및 바벨 업그레이드 소기

소기의 배경

업무 코드가 증가함에 따라 프로젝트 코드의 컴파일 시간도 증가함에 따라 이 통증에 대해 dev에서 최적화를 하였다.

제1부분:dev 컴파일 시간 최적화

여기서 최적화의 주요 사고방식은 dev 환경에서 단독으로 dll 프로필을 만들어서 프로젝트의 일부분을 패키지에 의존하여 프로필에 기록하고 최종적으로 dev 환경에서 전용 dll 파일을 생성하는 것이다. 이렇게 처리하는 목적은 개발할 때의 컴파일 시간을 줄이는 것이다(ps: 테스트를 통해 50% 정도의 컴파일 효율을 높일 수 있다). 구체적으로 다음과 같이 수정한다.

독립dev의 dll 설정

현재 dll을 복사합니다.config.js 파일을 개발 환경 전용 dll-dev.config로 변경합니다.js 를 다음과 같이 수정합니다.

// dll-dev.config.js
module.exports = {
  entry: {
    vendor: [
      'moment',
      'nprogress',
      'cookie_js',
      'echarts',
      'jsbarcode',
      'lodash',
      'lodash-decorators',
      'isomorphic-fetch',
      'antd',
      'react',
      'react-dom',
      'react-router',
      'react-router-redux',
      'redux',
      'redux-fetch-elegant',
      'redux-logger',
      'redux-thunk'
      ...
    ]
  }
}

개발 환경 프로필 수정 웹팩.dev.config.js

패키지 1개 추가.json 명령, dev 환경에서 dll 파일을 단독으로 생성하는 데 사용

"scripts": {
  "dll-dev": "./node_modules/.bin/webpack --config dll-dev.config.js",
}

dev 환경에서 이 새로운 명령줄을 실행하여 dll 파일과 대응하는 json 맵 파일을 생성합니다. dev에서 일부 import에서 들어오는 패키지 파일의 컴파일을 줄이고 프로젝트의 전체 컴파일 시간을 줄일 수 있습니다.

npm run dll-dev

섹션 2: 엔지니어링 업그레이드babel@7+

패키지 업그레이드 & 군더더기 제거

and
'babel-preset-stage-2'가 삭제되었습니다. 개념이 모호하고 명확하지 않기 때문에 제안의 삭제나 변경으로 인해 예견할 수 없는 문제가 발생하는 것을 방지하기 위해babel@7+에서 단계 사전 설정을 삭제했습니다.
기타 의존 패키지v@6+업그레이드 대상v@7+채택babel@7+의 최신 공식 패키지 이름입니다.antd가 불러올 때 사용하는babel-plugin-import도babel에 따라 1.11.0으로 업그레이드해야 합니다. 설정 문법과 자원의 디렉터리 이름이 바뀌었기 때문입니다(babel.config.js 참조).

babel 프로필 수정

에서babel@7+에 새 구성 파일babel이 추가되었습니다.config.js, 이렇게 하면 프로필을 더욱 유연하게 할 수 있고babel이 사용하는monorepo 관리에 더욱 적합하다. 예를 들어 프로필을 모든 가방에 집중할 수도 있고 각 가방에 단독으로 프로필을 만들 수도 있다. 우리는 이 프로필을 사용한다. config에 판단 논리를 써서 dev와 프로필의 깊은 격리를 실현해야 하기 때문이다.
ps: 상세한 설정 공식 설명x vs 7.x
새 babel 구성 파일은 다음과 같습니다.

// babel.config.js
module.exports = function (api) {
  api.cache(true)
  const presets = [
    '@babel/preset-env',
    '@babel/react'
  ]
  const plugins = [
    ['@babel/plugin-transform-runtime', {
      'helpers': false,
      'regenerator': true
    }],
    ['@babel/plugin-proposal-class-properties', { 'loose': true }],
    ['import', {
      'libraryName': 'antd',
      'libraryDirectory': 'lib',
      'style': 'css'
    }, 'ant']
  ]
  return {
    presets,
    plugins
  }
}

컴파일 테스트 대비

동일한 컴퓨터 및 개발 환경을 사용하여 테스트 비교

프로모션 전에 컴파일하는 데 걸리는 시간은 다음과 같습니다.
업그레이드 후 컴파일을 수행하는 데 걸리는 시간은 다음과 같습니다.
업그레이드하기 전에 수정 사항을 저장하는 데 걸리는 시간은 다음과 같습니다.
업그레이드 후 수정 사항을 저장하는 데 걸리는 시간은 다음과 같습니다.