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