webpack的压缩插件uglifyjs-webpack-plugin变为teaser-webpack-plugin

174 阅读1分钟

uglifyjs-webpack-plugin 压缩es6语法有问题,而且该工具已不再维护,如果项目中还在使用的话,建议改成 teaser-webpack-plugin

在 webpack.build.config.js 文件中引入

const TerserPlugin = require('terser-webpack-plugin');
const terserOptions = require('./terserOptions');


module.exports = assign(baseConfig, {
  mode: 'production',
  plugins: [
  optimization: assign(
    {
      minimize: true,
      concatenateModules: false,
      minimizer: [
        // 用于配置 minimizers 和选项
        new TerserPlugin(
          terserOptions({
            productionSourceMap: false,
          }),
        ),
      ],
    },
    baseConfig.optimization,
  ),
});

terserOptions.js的代码:

module.exports = (options) => ({
  terserOptions: {
    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,
});

因为我的项目比较老,不能安装最新版的teaser-webpack-plugin,使用的是1.x版本

  "terser-webpack-plugin": "^1.2.1",

www.codeprj.com/blog/a1653b…
www.npmjs.com/package/ter…
blog.csdn.net/qq_15601471…