[Vue CLI 3] Uglify 相关的应用和设计

Posted 2021-01-28 lovellll

在本文开始之前，先留一个问题？

如果在新版本我想加一个 drop_console 的配置呢？

在老版本的脚手架生成的配置中，对于线上环境的文件：webpack.prod.conf.js

使用了插件：uglifyjs-webpack-plugin

const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin‘)

插件配置如下：

plugins: [
  new UglifyJsPlugin({
    uglifyOptions: {
      compress: {
        warnings: false
      }
    },
    sourceMap: config.build.productionSourceMap,
    parallel: true
  })
]

我们看一下新版本的是如何处理的呢？

在文件：@vue/cli-service/lib/config/prod.js 中：

先有一个判断，测试环境不压缩：通过 optimization.minimize

if (process.env.VUE_CLI_TEST) {
  webpackConfig.optimization.minimize(false)
}

然后如果不是测试环境：

第一步也是加载插件 uglifyjs-webpack-plugin

const UglifyPlugin = require(‘uglifyjs-webpack-plugin‘)

第二步进行插件配置：通过 optimization.minimizer

webpackConfig.optimization.minimizer([
  new UglifyPlugin(uglifyOptions(options))
])

这里的内置配置有哪些呢？我们看看 uglifyOptions.js 文件：

相比之前的 uglifyOptions 要多很多：

module.exports = options => ({
  uglifyOptions: {
    compress: {
      // turn off flags with small gains to speed up minification
      arrows: false,
      collapse_vars: false, // 0.3kb
      comparisons: false,
      computed_props: false,
      hoist_funs: false,
      hoist_props: false,
      hoist_vars: false,
      inline: false,
      loops: false,
      negate_iife: false,
      properties: false,
      reduce_funcs: false,
      reduce_vars: false,
      switches: false,
      toplevel: false,
      typeofs: false,

      // a few flags with noticable gains/speed ratio
      // numbers based on out of the box vendor bundle
      booleans: true, // 0.7kb
      if_return: true, // 0.4kb
      sequences: true, // 0.7kb
      unused: true, // 2.3kb

      // required features to drop conditional branches
      conditionals: true,
      dead_code: true,
      evaluate: true
    },
    mangle: {
      safari10: true
    }
  },
  sourceMap: options.productionSourceMap,
  cache: true,
  parallel: true
})

来源：https://segmentfault.com/a/1190000016254326