关于前端:压缩-js-代码就用-terser

webapck 中提供了压缩 js 代码的形式，能够移除无用代码、替换变量名等，缩小编译后文件体积，晋升加载速度。

在 webpack 配置文件 webpack.config.js 中通过将 mode 设置为 development 或者 production，会对代码进行不同的解决。

能够发现，production 模式下编译的文件，文件及变量名被批改、空格换行被去除，即便本人没有进行配置，webpack 也会在咱们设置 production 的模式时默认增加一些属性，比方这里 js 代码压缩用到的就是 TerserPlugin 。

TerserPlugin 解决代码依赖的是 terser 这个工具，terser 是能够间接装置并独立应用的，应用的时候有十分多的配置能够自行定义，具体可参考官网文档

其中属于 compress options

arrows — 对象里的箭头函数函数体只有一句
arguments — arguments 参数进行转换
dead_code — 删除不可达的代码 (remove unreachable code)

以下属于 mangle options

toplevel — 顶层作用域要不要美化
keep_classnames — 类名保留
keep_fnames — 保留函数名

通过 npm install terser 装置依赖后，间接执行 terser 命令语句 npx terser ./src/index.js -o ./terser/default.js，这里没有进行配置，所以应用的是默认解决形式，只移除了换行。

自定义 js 代码的编译形式，npx terser ./src/index.js -o terser/index.min.js -c arguments,arrows=true -m toplevel,keep_classnames,keep_fnames

以上配置示意

函数中应用到 arguments 时，转成形参
箭头函数体只有一句时，去除 return
美化顶层作用域的变量，比方将变量名 message 变为 o
保留类名
保留函数名

能够看到，编译后的代码去除了空格和换行，以及一些其它指定的解决

为了更不便浏览，将编译后的代码格式化

在我的项目中，有很多 js 文件须要进行压缩解决，本人一个个命令去指定编译规定的形式会过于麻烦，通过 TerserPlugin 对立配置可能解决这个问题。

通过 npm install terser-webpack-plugin --save-dev 装置依赖后，在 webpack.config.js 文件中定义对应的配置，更多配置可参考官网文档

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

module.exports = {
  // 其它配置省略 
  mode: 'production',
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            arguments: true,
            dead_code: true,
          },
          toplevel: true,
          keep_classnames: true,
          keep_fnames: true,
        },
      }),
    ],
  },
};

编译后文件的 js 代码被压缩到了一行，格式化之后能够看到对应的解决

terser 是一个工具，有着压缩、转换解决 js 代码等性能，通过命令行能够间接对 js 文件进行编译。

但在我的项目中，间接应用 terser 过于繁琐，所以借助 terser-webpack-plugin 对立编译，当 mode 为 production 时，有默认的配置，也能够自行定义解决规定。

以上就是 terser 和 TerserPlugin 的介绍，更多无关 webpack 的内容能够参考我其它的博文，继续更新中~

关于前端:压缩-js-代码就用-terser

不同 mode

terser

TerserPlugin

总结