前端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文件中用是没问题的。