vue2使用webpack-parallel-uglify-plugin打包优化

2,075 阅读2分钟

1. 安装 webpack-parallel-uglify-plugin 插件
命令如下安装:

npm i -D webpack-parallel-uglify-plugin

2.在webpack.prod.conf.js 配置代码如下:

// 引入 ParallelUglifyPlugin 插件
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');

module.exports = {
  plugins: [
    // 使用 ParallelUglifyPlugin 并行压缩输出JS代码
    new ParallelUglifyPlugin({
      // 传递给 UglifyJS的参数如下:
      uglifyJS: {
        output: {
          /*
           是否输出可读性较强的代码,即会保留空格和制表符,默认为输出,为了达到更好的压缩效果,
           可以设置为false
          */
          beautify: false,
          /*
           是否保留代码中的注释,默认为保留,为了达到更好的压缩效果,可以设置为false
          */
          comments: false
        },
        compress: {
          /*
           是否在UglifyJS删除没有用到的代码时输出警告信息,默认为输出,可以设置为false关闭这些作用
           不大的警告
          */
          warnings: false,

          /*
           是否删除代码中所有的console语句,默认为不删除,开启后,会删除所有的console语句
          */
          drop_console: true,

          /*
           是否内嵌虽然已经定义了,但是只用到一次的变量,比如将 var x = 1; y = x, 转换成 y = 5, 默认为不
           转换,为了达到更好的压缩效果,可以设置为false
          */
          collapse_vars: true,

          /*
           是否提取出现了多次但是没有定义成变量去引用的静态值,比如将 x = 'xxx'; y = 'xxx'  转换成
           var a = 'xxxx'; x = a; y = a; 默认为不转换,为了达到更好的压缩效果,可以设置为false
          */
          reduce_vars: true
        }
      },
  uglifyJS: {},
  test: /.js$/g,
  include: [],
  exclude: [],
  cacheDir: '',
  workerCount: '',
  sourceMap: false
    }),
  ]
}

在通过 new ParallelUglifyPlugin() 实列化时,支持以下参数配置如下:

test: 使用正则去匹配哪些文件需要被 ParallelUglifyPlugin 压缩,默认是 /.js$/.
include: 使用正则去包含被 ParallelUglifyPlugin 压缩的文件,默认为 [].
exclude: 使用正则去不包含被 ParallelUglifyPlugin 压缩的文件,默认为 [].
cacheDir: 缓存压缩后的结果,下次遇到一样的输入时直接从缓存中获取压缩后的结果并返回,cacheDir 用于配置缓存存放的目录路径。默认不会缓存,想开启缓存请设置一个目录路径。

**workerCount:**开启几个子进程去并发的执行压缩。默认是当前运行电脑的 CPU 核数减去1。
**sourceMap:**是否为压缩后的代码生成对应的Source Map, 默认不生成,开启后耗时会大大增加,一般不会将压缩后的代码的
sourceMap发送给网站用户的浏览器。
uglifyJS:用于压缩 ES5 代码时的配置,Object 类型,直接透传给 UglifyJS 的参数。
uglifyES:用于压缩 ES6 代码时的配置,Object 类型,直接透传给 UglifyES 的参数。

至此已经完成了该插件的使用!

打包却发现报错了!

building for production...E:\Myjob\project\git\数字交通\v2\szjt-ui\node_modules\_webpack-parallel-uglify-plugin@2.0.0@webpack-parallel-uglify-plugin\index.js:29 compiler.hooks.compilation.tap("ParallelUglifyPlugin", (compilation) => { ^ TypeError: Cannot read property 'compilation' of undefined...

经过一番百度尝试后发现是自己的webpack版本问题!

本项目webpack版本   "webpack": "^3.6.0",

要解决此报错有2中方法:

1.升级webpack版本到4.0   

2.安装webpack-parallel-uglify-plugin低版本1.1.0(原版本是2.0的)

npm i webpack-parallel-uglify-plugin@1.1.0 -D

感觉升级webpack版本太繁琐,怕会引起一系列的问题,故此项目才用了第二种方法,打包OK!

引用  www.cnblogs.com/tugenhua070…