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 代码就用 terser的更多相关文章

  1. js数组特定位置元素置空,非null和undefined,实现echarts现状图效果;谷歌格式化压缩js代码

    一.想要实现eCharts线状图表的断点效果,如图(后来又查到数据格式为data:['-', 2, 3,'-' , 5, 6, 7]:也可以断点显示) 这种效果,在设置数据的时候应该是这样: data ...

  2. nodejs+gulpjs压缩js代码

    1.安装node.js 下载地址:nodejs.org  或者  nodejs.cn 2.安装gulp之前我们需要安装nodejs的环境,检测能够正常使用npm后,我们用npm对gulp进行一次全局安 ...

  3. 记录一个在线压缩和还原压缩js代码的工具

    packer – javascript 压缩工具 http://dean.edwards.name/packer/ Javascript Beautifier ---可以恢复某些压缩工具压缩的js代码 ...

  4. grunt压缩js代码

    安装node.js的环境和grunt插件在上一篇已经将过,点击这里跳到上一篇 所以我们直接从压缩插件的安装开始讲 起 1.安装uglify插件 目录结构如下: 命令行:npm install grun ...

  5. YUI Compressor是如何压缩JS代码的?

    YUI Compressor 压缩 JavaScript 的内容包括: 移除注释 移除额外的空格 细微优化 标识符替换(Identifier Replacement) YUI Compressor 包 ...

  6. gulp 压缩 js 和 css 代码

    我们在写出来的代码都是非常规范的,改换行的时候就换行,改tab 的时候就有tab,还有这样做是为了后期维护方便,但是这也导致了内存占用量的增大,当把把代码发到线上,如果网速慢一点,可能很久都加载不出来 ...

  7. 压缩和还原压缩的JS代码

    压缩JS代码:packer – 最好用的 javascript 压缩工具地址: http://dean.edwards.name/packer/ http://kan.willin.org/?page ...

  8. 如何使用grunt压缩js文件

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...

  9. sublime text2之js压缩-Js Minifier

    一款基于Google Closure compiler压缩Js文件插件. 快捷键: Ctrl+Alt+M            当前文件内压缩Js代码(不推荐) Ctrl+Alt+Shift+M   ...

  10. 《Gulp 入门指南》 : 使用 gulp 压缩 JS

    <Gulp 入门指南> : 使用 gulp 压缩 JS 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 访问论坛获取帮助 压缩 js 代码可降低 js 文件大小,提高页面打 ...

随机推荐

  1. 【Python基础】变量的作用域与global、nonlocal

    在 Python 中,变量的作用域指的是变量可以被访问的范围.Python 中的变量作用域有两种: 局部作用域:变量在函数函数内部的时候,只能在函数内部使用.这样的变量被称为局部变量. 如果在函数内部 ...

  2. 2020-11-06:go中,谈一下调度器。

    福哥答案2020-11-06:·MPG模型:goroutine的并发模型可以归纳为MPG模型:·MPG概念:线程(machine,系统线程,物理线程)-内核(processor)-协程(gorouti ...

  3. springsecurity 认证,授权,注销,动态菜单,记住我和首页定制

    搭建环境: 1.在创建springboot时选择组件web,thymeleaf,spring-security 2.导入静态资源,导入后测试一下环境  认证和授权: 继承类WebSecurityCon ...

  4. 快速上手kettle(二)小试牛刀

    目录 一 .前言 二 .两个小目标 三. kettle核心概念介绍 3.1 转换 3.1.1 步骤(Step) 3.1.2 跳(Hop) 3.1.3 元素据 3.1.4 数据类型 3.1.5 并发执行 ...

  5. 柏林噪声&幻想大陆地图生成

    序言 之前介绍过perlin噪声的实现,现在应用实践一下--程序化生成幻想大陆 这里使用的是perlin噪声倍频技术(也称分形噪声),详情传送门:柏林噪声算法 代码示例使用的是shadertoy的语法 ...

  6. 如何判断Keil MDK ARM中已经破解?如何判断Keil MDK ARM中已经安装了相应的器件库?如何判断CubeMX的器件库已经安装成功?

    如何判断CubeMX的器件库已经安装成功?请对照下图 如何判断Keil MDK ARM中已经安装了相应的器件库?请看下图 如何判断CubeMX的器件库已经安装成功?请对照下图

  7. STL-priority_queue(ACM)

    1.无法访问v.front().v.back() 2.是一个 堆,默认为大根堆,改造后为小根堆 大根堆 重构函数(默认)(大根堆) priority_queue<int> v; 基本操作 ...

  8. GoldenEye项目实战

    前言 "操千曲而后晓声,观千剑而后识器",下载靶机项目实战提升自我,这是一个涉及到渗透与CTF联合的实战项目. Descript: 我最近完成了一个OSCP类型的易受攻击机器的创建 ...

  9. C# 图片转PDF,PDF增加水印文字

    好久没写博客了,今天给大家分享一个图片转PDF的相关操作,也算是一次总结吧. 首先需要准备动态库itextsharp.dll,这个dll去网上下载,都可以下载到,C#对PDF的操作都是基于这个类库来实 ...

  10. [ARM 汇编]高级部分—ARM汇编编程实战—3.3.2 嵌入式开发环境搭建

    搭建一个嵌入式开发环境主要包括以下几个部分: 安装交叉编译器 配置集成开发环境(IDE) 安装调试工具 下载和烧录程序 接下来,我们将详细介绍每个部分,并提供相应的实例. 安装交叉编译器 交叉编译器是 ...