ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

压缩 js 代码就用 terser

2022-07-03 20:03:33  阅读:140  来源: 互联网

标签:代码 js TerserPlugin webpack terser true 压缩


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 的内容可以参考我其它的博文,持续更新中~

标签:代码,js,TerserPlugin,webpack,terser,true,压缩
来源: https://www.cnblogs.com/vigourice/p/16440707.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有