[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
})
    原文作者:dailyvuejs
    原文地址: https://segmentfault.com/a/1190000016254326
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞