此次优化主要使用了happypack和cache-loader两个打包的插件
happypack
在使用 Webpack 对项目进行构建时,会对大量文件进行解析和处理。当文件数量变多之后,Webpack 构件速度就会变慢, Happypack 作用在 loader 上, 可以将文件解析任务分解成多个子进程并发执行。子进程处理完任务后再将结果发送给主进程。所以可以大大提升 Webpack 的项目构件速度。
⚠️在测试 Demo 或者小型项目中,使用 happypack 对项目构建速度的提升不明显,甚至会增加项目的构建速度, 在比较复杂的大中型项目中,使用 happypack 才能看到比较明显的构建速度提升
- 使用
npm install happypack --save-dev (安装)
//在webpack.base.config.js文件里面
const HappyPack = require('happypack');
module.exports = {
...
module: {
rules: [
test: /.js$/,
// 用下面的方式替换成 happypack/loader,并使用 id 指定创建的 HappyPack 插件
use: ['happypack/loader?id=babel'],
include: [resolve('src')]
]
},
plugins: [
...,
new HappyPack({
/*
* 必须配置
*/
// id 标识符,要和 rules 中指定的 id 对应起来
id: 'babel',
// 需要使用的 loader,用法和 rules 中 Loader 配置一样
// 可以直接是字符串,也可以是对象形式
loaders: ['babel-loader']
})
]
}
- 效果
bulid time 减少了大约 10%-20%左右
cache-loader
在一些性能开销较大的 loader 之前添加cache-loader,会将结果缓存到磁盘里, 因为要写入到磁盘上,所以第一次的 build 会比原本还要多花一些时间,但是第二次 build 就会减少很多的时间。
⚠️ 请注意,保存和读取这些缓存文件会有一些时间开销,所以请只对性能开销较大的 loader 使用此 loader,经对比发现,对babel-loader和ts-loader使用cache-loader, 效果明显。
- 使用
npm install cache-loader --save-dev (安装)
//在webpack.base.config.js文件里面
module.exports = {
...
module: {
rules: [
{
test: /.js$/,
// 直接将cache-loader放在需要缓存的loader前面即可
use: ['cache-loader', 'babel-loader'],
include: [resolve('src')],
},
],
},
};
- 效果
除开第一次build需要花费较长时间外,后面bulid time 减少了大约 20%-40%左右
▶◀除此之外,还修改了原来的打包方式, 原打包方式是会直接删除release文件夹,release文件夹里面包含了dist文件夹, node_modules,server.js等文件,这些都是部署到服务器需要的文件, 删除后会重新生成新的文件, 然后一些第三方的依赖包也要重新下载,这就浪费了很多时间,因为大部分的第三方依赖包是没有什么变化的,所有我们应该保留release文件里面的node_modules文件, 每次只需要下载新的依赖包就可以了,这样会节省很多时间。
//修改前的package.json, 删除了整个release文件夹
"package": "rimraf release && yarn run build && gulp && (cd release && yarn install --prod && tar cvfz package.tar.gz * && mkdir package && mv package.tar.gz package)",
//修改后的package.json, 删除了rimraf release, 保留了release文件夹
"package": "yarn run build && gulp && (cd release && yarn install --prod && tar cvfz package.tar.gz * && mkdir package && mv package.tar.gz package)",
//修改前的gulpfile.js, 清除整个release文件夹
gulp.task('clean', () => del.sync(['release']))
//修改后的gulpfile.js, 删除了release文件夹里面的除了node_modules以外的所有内容,这些被删除的文件会在build后重新生成。
gulp.task('clean', function() {
return del.sync(['release/**', '!release', '!release/node_modules', '!release/node_modules/**']);
});
- 效果
效果比较明显,bulid time 减少了大约 20%-30%左右