工程優化暨babel升級小記

小記背景

隨着業務代碼的增多，項目代碼的編譯時長也在增多，遂針對這個痛點在dev下作些優化

第一部分：優化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'
      ...
    ]
  }
}
複製代碼

• 修改開發環境配置文件webpack.dev.config.js

• 增長一條package.json命令,用於單獨生成dev環境下的dll文件

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

dev環境下執行這條新的命令行生成dll文件以及對應的json映射文件，以便省去dev下一些import進來的包文件編譯，從而減小工程的總體編譯時長

npm run dll-dev
複製代碼

第二部分：工程升級到babel@7+

升級package依賴包 & 去除冗餘

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和pro的更深層次隔離

ps:詳細的配置官方說明詳見6.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
  }
}
複製代碼

編譯測試對比

使用同一臺電腦及開發環境進行測試比較

升級前執行編譯耗時以下：

升級後執行編譯耗時以下：

升級前進行修改保存耗時以下：

升級後進行修改保存耗時以下：