UMI使用chainWebpack優化打包速度

背景

umi的項目打包的時候發現時間達到了145.22s，忍不了。。。

方案

1、使用Happypack對js進行優化
2、使用terser-webpack-plugin把cpu利用起來

開始

Happypack作用

Happypack 的作用就是將文件解析任務分解成多個子進程並發執行。子進程處理完任務后再將結果發送給主進程。利用 js 的多進程來實現打包加速。

Happypack使用

安裝

yarn add happypack --save-dev
npm install happypack --save-dev

使用

1、在config/config.js中引入

const HappyPack = require('happypack');
const happyThreadPool = HappyPack.ThreadPool({ size: require('os').cpus().length })

2、在defineConfig的chainWebpack中使用

chainWebpack: (memo, { webpack }) => {
    memo.plugin('HappyPack').use(HappyPack, [{
      id: 'js',
      loaders: ['babel-loader'],
      threadPool: happyThreadPool,
    }])
}

重新yarn run build

時間降到了133.51s

繼續

使用terser-webpack-plugin

如果你使用的是 webpack v5 或以上版本，你不需要安裝這個插件。webpack v5 自帶最新的 terser-webpack-plugin。如果使用 webpack v4，則必須安裝 terser-webpack-plugin v4 的版本。

安裝

yarn add terser-webpack-plugin --save-dev
npm install terser-webpack-plugin --save-dev

使用

1、在config/config.js中引入

const TerserPlugin = require('terser-webpack-plugin');

2、在defineConfig的chainWebpack中使用

memo.plugin('TerserPlugin').use(TerserPlugin, [{
      parallel: require('os').cpus().length - 1,
      terserOptions: {
        compress: {
          inline: false
        },
        mangle: {
          safari10: true
        }
      }
}])

重新yarn run build