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

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

不同mode

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

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

terser

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
  • 保留类名
  • 保留函数名

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

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

TerserPlugin

在我的项目中,有很多 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 对立编译,当 modeproduction 时,有默认的配置,也能够自行定义解决规定。

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

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年50元

阿里云限时活动-2核2G-5M带宽-60G SSD-1000G月流量 ,特惠价99元/年(原价1234.2元/年,可以直接买3年),速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据