webpack5性能优化
webpack构建速度
一、优化babel-loader
注意：开启缓存,配置后打包是就能缓存babel
- webpack.common.js文件命中缓存cacheDirectory
{
test: /\.js$/,
use: ['babel-loader?cacheDirectory'],
include: srcPath,
exclude: /node_modules/
},测试：
- 打包后的结果:
注意：打包后promise的打包文件会变化文件名
二、IgnorePlugin避免引入无用模块
注意：引入第三方模块，模块可能有许多东西是我们不需要的，而引入时会默认引入所有JS，代码量过大。 IgnorePlugin可以实现忽略文件，不进行打包。
// 忽略 moment 下的 /locale 目录
new webpack.IgnorePlugin({
resourceRegExp: /\.\/locale/, contextRegExp: /moment/
})测试不配置IgnorePlugin：
- 安装插件
sudo cnpm i moment -D- src目录下index.js代码
import moment from 'moment'
moment.locale('zh-cn')
console.log('locale',moment.locale());
console.log('data',moment().format('ll'));
- 运行 npm run build打包代码
注意：打包出来的代码index.js文件有400多kb
测试配置IgnorePlugin：
- webpack.prod.js文件的plugins
// 忽略 moment 下的 /locale 目录
new webpack.IgnorePlugin({
resourceRegExp: /\.\/locale/, contextRegExp: /moment/
})- index.js文件中按需引入
注意：打包出来的index.js文件小了200多kb，因为用了IgnorePlugin所以moment没有进行打包，而少的200kb就是moment的语言包
三、noParse避免重复打包
注意： 因为min.js后缀名的文件是已经采用模块化处理过的了，所以不需要进行重新打包。直接用noParse的方式进行过滤掉。
对比、IgnorePlugin和noParse的区别
注意：IgnorePlugin直接不引入，代码中没有。
noParse引入，但是不打包
四、happyPack多进程打包
注意：JS单线程，开启多进程打包。提高构件速度（特别书多核CPU）
- 安装插件
sudo cnpm i happypack -D- 将webpack.common.js文件中关于babel-loader的配置移动到webpack.dev.js文件中去，
- webpack.prod.js的module.rules中配置babel-loader
{
test: /\.js$/,
use: ['happypack/loader?id=babel'],
include: srcPath,
exclude: /node_modules/
},- plugins里new happyPack
new HappyPack({
// 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
id: 'babel',
// 如何处理 .js 文件，用法和 Loader 配置中一样
loaders: ['babel-loader?cacheDirectory'],
// ... 其它配置项
}),测试
- 执行npm run build
注意：打包完成没什么效果，只是比正常打包快而已，但是打包过程中的代码里会有happy打包的字样出现
五、ParallelUglifyPlugin多进程压缩JS
注意：JS是单线程，开启多进程压缩更快。和happypack原理相同
- 安装插件
sudo cnpm i webpack-parallel-uglify-plugin -D- 在webpack.prod.js文件中引入
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')- 在webpack.prod.js文件中的plugins新建一个
// 使用 ParallelUglifyPlugin 并行压缩输出的 JS 代码
new ParallelUglifyPlugin({
// 传递给 UglifyJS 的参数
// （还是使用 UglifyJS 压缩，只不过帮助开启了多进程）
uglifyJS: {
output: {
beautify: false, // 最紧凑的输出
comments: false, // 删除所有的注释
},
compress: {
// 删除所有的 `console` 语句，可以兼容ie浏览器
drop_console: true,
// 内嵌定义了但是只用到一次的变量
collapse_vars: true,
// 提取出出现多次但是没有定义成变量去引用的静态值
reduce_vars: true,
}
}
})测试：
- 执行npm run build
正常打包出文件，打包程序内代码会出现多个进程一起打包的情况
注意：项目较大、直接打包太慢、开启多进程打包速度会更快
项目较小、直接打包快、开启 多进程打包速度会变慢