背景
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
}
}
}])