[Vue CLI 3] Uglify 相關的應用和設計

在本文開始以前，先留一個問題？

若是在新版本我想加一個 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
})