压缩 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
统一编译,当 mode
为 production
时,有默认的配置,也可以自行定义处理规则。
以上就是 terser 和 TerserPlugin 的介绍, 更多有关 webpack
的内容可以参考我其它的博文,持续更新中~
压缩 js 代码就用 terser的更多相关文章
- js数组特定位置元素置空,非null和undefined,实现echarts现状图效果;谷歌格式化压缩js代码
一.想要实现eCharts线状图表的断点效果,如图(后来又查到数据格式为data:['-', 2, 3,'-' , 5, 6, 7]:也可以断点显示) 这种效果,在设置数据的时候应该是这样: data ...
- nodejs+gulpjs压缩js代码
1.安装node.js 下载地址:nodejs.org 或者 nodejs.cn 2.安装gulp之前我们需要安装nodejs的环境,检测能够正常使用npm后,我们用npm对gulp进行一次全局安 ...
- 记录一个在线压缩和还原压缩js代码的工具
packer – javascript 压缩工具 http://dean.edwards.name/packer/ Javascript Beautifier ---可以恢复某些压缩工具压缩的js代码 ...
- grunt压缩js代码
安装node.js的环境和grunt插件在上一篇已经将过,点击这里跳到上一篇 所以我们直接从压缩插件的安装开始讲 起 1.安装uglify插件 目录结构如下: 命令行:npm install grun ...
- YUI Compressor是如何压缩JS代码的?
YUI Compressor 压缩 JavaScript 的内容包括: 移除注释 移除额外的空格 细微优化 标识符替换(Identifier Replacement) YUI Compressor 包 ...
- gulp 压缩 js 和 css 代码
我们在写出来的代码都是非常规范的,改换行的时候就换行,改tab 的时候就有tab,还有这样做是为了后期维护方便,但是这也导致了内存占用量的增大,当把把代码发到线上,如果网速慢一点,可能很久都加载不出来 ...
- 压缩和还原压缩的JS代码
压缩JS代码:packer – 最好用的 javascript 压缩工具地址: http://dean.edwards.name/packer/ http://kan.willin.org/?page ...
- 如何使用grunt压缩js文件
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...
- sublime text2之js压缩-Js Minifier
一款基于Google Closure compiler压缩Js文件插件. 快捷键: Ctrl+Alt+M 当前文件内压缩Js代码(不推荐) Ctrl+Alt+Shift+M ...
- 《Gulp 入门指南》 : 使用 gulp 压缩 JS
<Gulp 入门指南> : 使用 gulp 压缩 JS 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 访问论坛获取帮助 压缩 js 代码可降低 js 文件大小,提高页面打 ...
随机推荐
- 【Python基础】变量的作用域与global、nonlocal
在 Python 中,变量的作用域指的是变量可以被访问的范围.Python 中的变量作用域有两种: 局部作用域:变量在函数函数内部的时候,只能在函数内部使用.这样的变量被称为局部变量. 如果在函数内部 ...
- 2020-11-06:go中,谈一下调度器。
福哥答案2020-11-06:·MPG模型:goroutine的并发模型可以归纳为MPG模型:·MPG概念:线程(machine,系统线程,物理线程)-内核(processor)-协程(gorouti ...
- springsecurity 认证,授权,注销,动态菜单,记住我和首页定制
搭建环境: 1.在创建springboot时选择组件web,thymeleaf,spring-security 2.导入静态资源,导入后测试一下环境 认证和授权: 继承类WebSecurityCon ...
- 快速上手kettle(二)小试牛刀
目录 一 .前言 二 .两个小目标 三. kettle核心概念介绍 3.1 转换 3.1.1 步骤(Step) 3.1.2 跳(Hop) 3.1.3 元素据 3.1.4 数据类型 3.1.5 并发执行 ...
- 柏林噪声&幻想大陆地图生成
序言 之前介绍过perlin噪声的实现,现在应用实践一下--程序化生成幻想大陆 这里使用的是perlin噪声倍频技术(也称分形噪声),详情传送门:柏林噪声算法 代码示例使用的是shadertoy的语法 ...
- 如何判断Keil MDK ARM中已经破解?如何判断Keil MDK ARM中已经安装了相应的器件库?如何判断CubeMX的器件库已经安装成功?
如何判断CubeMX的器件库已经安装成功?请对照下图 如何判断Keil MDK ARM中已经安装了相应的器件库?请看下图 如何判断CubeMX的器件库已经安装成功?请对照下图
- STL-priority_queue(ACM)
1.无法访问v.front().v.back() 2.是一个 堆,默认为大根堆,改造后为小根堆 大根堆 重构函数(默认)(大根堆) priority_queue<int> v; 基本操作 ...
- GoldenEye项目实战
前言 "操千曲而后晓声,观千剑而后识器",下载靶机项目实战提升自我,这是一个涉及到渗透与CTF联合的实战项目. Descript: 我最近完成了一个OSCP类型的易受攻击机器的创建 ...
- C# 图片转PDF,PDF增加水印文字
好久没写博客了,今天给大家分享一个图片转PDF的相关操作,也算是一次总结吧. 首先需要准备动态库itextsharp.dll,这个dll去网上下载,都可以下载到,C#对PDF的操作都是基于这个类库来实 ...
- [ARM 汇编]高级部分—ARM汇编编程实战—3.3.2 嵌入式开发环境搭建
搭建一个嵌入式开发环境主要包括以下几个部分: 安装交叉编译器 配置集成开发环境(IDE) 安装调试工具 下载和烧录程序 接下来,我们将详细介绍每个部分,并提供相应的实例. 安装交叉编译器 交叉编译器是 ...