兩個小優化，webpack打包速度飛起來

webpack打包速度優化-js

公司前端專案由於一些原因，很多業務都是放在同一倉庫內（例如業務a、b、c，對應目錄app/a app/b app/c），並且是用同一套webpack的配置進行打包，每次構建的時候通過傳入特定的引數打包指定的業務

本文github地址

優化1 使用babel7，@babel/preset-typescript替代ts-loader

使用babel7並且使用@babel/preset-typescript代替ts-loader。一方面，babel7擁有著更快的速度，另一方面，ts-loader預設是會讀取ts-config的，於是每次構建的時候ts-loader都會去檢查全有業務的型別（即使我們只打包a業務）。

需要注意的是升級babel7後，相關包名都變成@babel字首，並且stage-x不再支援（大概原因是stage-x每年都會有變，有的提案可能被廢棄導致有的語法被移除，但是卻很多專案可能使用了，換成單獨配置相關語法特性），需要轉對應。以及，@babel/preset-typescript不在支援namespace 詳情。

遷移指南

    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.4.4",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-typescript": "^7.3.3",
複製程式碼

一版而言對於react專案使用上面的即可。

• @babel/core babel的核心庫
• @babel/plugin-proposal-class-properties 寫react非常實用的類的箭頭函式繫結
• @babel/plugin-proposal-decorators 裝飾器語法
• @babel/preset-env es6+轉換
• @babel/preset-react react jsx支援
• @babel/preset-typescript ts支援

babel7新增了babel.config.js型的配置，對比.babelrc。.babelrc是從每一個檔案向上查詢配置的，babel.config.js則不會。

// babel.config.js

module.exports = function(api) {
  api.cache(true)

  const presets = [
    [
      '@babel/preset-env',
      {
        modules: false
      }
    ],
    '@babel/preset-react',
    '@babel/preset-typescript'
  ]
  const plugins = [
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    ['@babel/plugin-proposal-class-properties', { loose: true }]
  ]

  return {
    presets,
    plugins
  }
}

// webpack.js
...
        {
          test: /\.(jsx?|tsx?)$/,
          exclude: ['node_modules'],
          use: ['babel-loader']
        },
...
複製程式碼

優化2 happypack

happypack 是 webpack 的一個外掛，目的是通過多程式模型，來加速程式碼構建。（這個提升還是很明顯的）

使用happypack載入babel-loader。

let HappyPack = require('happypack')
let os = require('os')
let happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
...
        {
          test: /\.(jsx?|tsx?)$/,
          exclude: ['node_modules'],
          use: ['happypack/loader?id=babel']
        },
...
...
    plugins: [
      new HappyPack({
        id: 'babel',
        loaders: [
          {
            loader: 'babel-loader'
          }
        ],
        threadPool: happyThreadPool
      })]
...
複製程式碼

優化前

dev babel6+ts-loader 56806ms

build babel6+happypack 29758ms

優化後 dev babel7+happypack 9576ms

build babel7+happypack 23838ms

gayhub