工程優化暨babel升級小記

未來已來發表於2019-02-19

小記背景

隨著業務程式碼的增多，專案程式碼的編譯時長也在增多，遂針對這個痛點在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
  }
}
複製程式碼