前端VUE项目使用多线程10秒快速打包【附加打包失败解决案例】

如果前端VUE项目页面增多、引入文件剧增,或造成打包速度巨慢,作为前端是无法忍受的。
这是因为VUE项目默认打包插件是uglifyjs-webpack-plugin,属于单线程操作。
我们可以使用webpack-parallel-uglify-plugin插件模块,实现多线程并行式处理。
因此,现在需要先安装webpack-parallel-uglify-plugin,

1
npm i -D webpack-parallel-uglify-plugin

然后修改X\build\路径下的webpack.prod.conf.js文件
修改uglifyjs-webpack-plugin模块引入

1
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');


1
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');

然后注释掉

1
2
3
4
5
6
7
8
9
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),

添加以下语句就可以了

1
2
3
4
5
6
7
8
9
new ParallelUglifyPlugin({
cacheDir: '.cache/',
uglifyJS: {
output: {
comments: false
},
warnings: false
}
})

就此完毕!是不是很简单?打个包看看,打包速度是不是比以前提升好几倍,嘻嘻..

如果碰到VUE打包失败,出现下面的错误

1
UnhandledPromiseRejectionWarning: CssSyntaxError:

这个意思是说打包的CSS文件有非法字符,大部分是注释不规范造成的
我这里是因为CSS文件中误用 // 作为注释造成的,而 // 在SCSS文件中用是没问题的。