【Javascript系列】Terser除了压缩代码之外，还有优化代码的功能

最新推荐文章于 2025-04-01 16:40:58 发布

招财猫_Martin

最新推荐文章于 2025-04-01 16:40:58 发布

阅读量876

点赞数 7

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/promaster/article/details/139292879

什么是Terser

前端开发的小伙伴一定不陌生，经常用这个工具进行代码压缩。有一种说法是Uglify-es的替代品。作为Javascript的解析器和压缩器，已经得到了开发人员的广泛使用。

可以优化代码

今天一个偶然的机会，在写一个删除功能的确认框，进行调试的时候，发现代码在terser压缩过后有优化的痕迹。
压缩前：
在这里插入图片描述
压缩后：

从逻辑上加强了代码的可靠性。

使用情况

Terser除了代码解析和压缩之外，还能对代码进行非常好的优化。

部分参数

"scripts": {
   
   

    "pms:lib-myCalendar": "terser --compress typeofs=false --mangle --comments \"/^!/\" --output dist/js

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

招财猫_Martin

关注关注

7
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

【Javascript系列】Terser通过调用API来实现代码的压缩和优化功能

招财猫_Martin 的专栏

06-03

754

，第二个参数是 Promise 拒绝时的回调函数。，对Terser的功能做了一个初步的探索。原因是minify是一个异步函数，它在被调用后，就直接返回了，返回值是一个Promise对象。，会报错，因为minify还没有执行完压缩和优化的过程（尤其当文件比较大的时候，官方示例中没有提到）MDN文档中对于Promise的说明，同时也有详细参考的例子。如果有不明白的，随时给我留言，有问必回。函数调用，没有按常规的方式一行一行的直接按顺序调用，而是以。方法，在方法里写入压缩和优化后的代码到min.js文件。

压缩代码大小

05-31

"压缩代码大小"这个主题，涵盖了多种技术和策略，旨在优化源代码，使其在保持功能完整的同时变得更小。首先，代码压缩通常分为两种类型：语法压缩和混淆。语法压缩是通过消除不必要的字符和空白，如删除注释、换行...

参与评论您还未登录，请先登录后发表或查看评论

Webpack: Terser与代码压缩

Wang的专栏

07-01

2985

代码压缩是指在不改变代码功能的前提下，从声明式（HTML、CSS）或命令式（JavaScript）语言中删除所有不必要的字符（备注、变量名压缩、逻辑语句合并等），减少代码体积的过程，这在 Web 场景中能够有效减少浏览器从服务器获取代码资源所需要消耗的传输量，降低网络通讯耗时，提升页面启动速度，是一种非常基础且性价比特别高的应用性能优化方案。

【亲测免费】探索高效JavaScript压缩利器：Terser

gitblog_00006的博客

03-20

872

探索高效JavaScript压缩利器：Terser 是一个强大且高效的JavaScript代码压缩库，旨在帮助开发者减少其应用程序的文件大小，从而提高加载速度和用户体验。它是著名的UglifyJS的继任者，专注在优化ES6+语法的支持和性能。项目简介 Terser的核心功能是将源代码转换为等价但更小的版本，通过删除未使用的变量、内联函数、移除空格、注释以及更紧凑的语法表示等方式实现。它不仅支持传...

terser作为js代码压缩工具

莫问前程F1的博客

08-21

7166

# 全局安装terser命令行工具 npm install -g terser # 使用terser terser ./foo.js -c pure_funcs=[console.log],toplevel=true -m -o bar.js # -c即compress表示普通的压缩代码 # pure_funcs表示删除代码中的console.log方法 # toplevel为true表示只在顶级作用域压缩清理变量 # -m即mangle会压缩变量名等等 # -o代表输出路径 const Terser.

压缩 js 代码就用 terser

开心学前端 : )

07-03

6727

中提供了压缩 js 代码的方式，可以移除无用代码、替换变量名等，减少编译后文件体积，提升加载速度。在配置文件中通过将设置为或者，会对代码进行不同的处理。可以发现，模式下编译的文件，文件及变量名被修改、空格换行被去除，即使自己没有进行配置，webpack 也会在我们设置的模式时默认添加一些属性，比如这里js代码压缩用到的就是。处理代码依赖的是这个工具，是可以直接安装并独立使用的，使用的时候有非常多的配置可以自行定义，具体可参考官方文档其中属于 compress options以下属于 ma

JsMin: 优化JavaScript代码压缩工具

有些工具除了去除空白和注释之外，还能进一步优化代码结构，比如缩短变量和函数名，甚至自动合并多个JS文件，从而实现更高级的压缩。 3. 使用JsMin的优势：JsMin工具相对简单，执行速度快，非常适合于快速且基本的...

WEB前端自动化优化工具-代码语法检测-代码压缩

03-08

uglify-js和terser是常用的JavaScript压缩工具，它们可以去除代码中的注释、空格、换行，以及通过变量重命名等方式进一步减小文件大小。对于CSS，我们有cssnano，它可以压缩和优化CSS代码，删除无用的规则，合并选择...

压缩代码：在生产环境中，使用UglifyJS、Terser等代码压缩工具对vendor.js进行压缩，减少文件体积。

02-28

通过安装并配置 `terser-webpack-plugin` 插件可以实现高效的代码压缩。首先，在命令行执行以下指令来安装必要的依赖： ```bash npm install terser-webpack-plugin --save-dev ``` 接着修改 `webpack.prod.js` ...

【亲测免费】 Terser：现代JavaScript压缩工具的首选

gitblog_00640的博客

10-10

1142

Terser：现代JavaScript压缩工具的首选项目介绍 Terser是一款专为ES6+设计的JavaScript压缩工具，旨在帮助开发者优化和压缩JavaScript代码，从而提升网页加载速度和性能。Terser不仅继承了uglify-es的优秀特性，还解决了uglify-es不再维护的问题，确保了ES6+代码的兼容性和压缩效果。项目技术分析 Terser的核心功能包括代码混淆（mang...

gulp-terser：gulp插件，压缩的es6 +代码

02-03

吞食者 Gulp插件，压缩的es6 +代码。安装 $ npm install gulp-terser --save-dev 要么 $ yarn add gulp-terser --dev 如何使用 const gulp = require ( 'gulp' ) ; const terser = require ( 'gulp-terser' ) ; function es ( ) { return gulp . src ( './src/index.js' ) . pipe ( terser ( ) ) . pipe ( gulp . dest ( './build' ) ) ; } exports . default = es ; 选件可以通过查看Terser配置。 const gulp = require ( 'gulp' ) ; const terser = require ( 'gulp-terser' ) ; function es ( ) { return gulp . src ( './src/index.js' ) . pipe (

terser-webpack-plugin：Terser插件

02-06

terser-webpack-plugin 该插件使用来缩小JavaScript。入门如果您使用的是webpack v5或更高版本，则无需安装此插件。 Webpack v5随附了最新的terser-webpack-plugin 。使用Webpack v4，您必须安装terser-webpack-plugin v4。首先，您需要安装terser-webpack-plugin ： $ npm install terser-webpack-plugin --save-dev 然后将插件添加到您的webpack配置中。例如： webpack.config.js const Ter

掌握Terser：JavaScript代码压缩优化实战指南

weixin_42605397的博客

09-24

2539

本文还有配套的精品资源，点击获取简介：Terser是一个高效的JavaScript代码压缩工具，用于优化和压缩代码以提高网站性能。本指南涵盖了Terser的压缩过程、配置使用、与前端构建工具集成、代码优化、对现代JavaScript特性的支持、错误处理和性能对比等方面。掌握Terser可以帮助开发者在保持代码效率的同时，提升代码的可读性和维护性。 1. Ters...

webpack(高级)--文件的压缩Terser(js/css/html) Tree Shaking

聪明勇敢有力气的博客

02-15

3245

webpack(高级)--文件的压缩Terser(js/css/html) Tree Shaking

使用Terser混淆js代码

buhaisao321的博客

08-16

535

mangle：启用变量和函数名的混淆。–compress：启用压缩选项。在cmd命令行使用terser。-o：指定输出文件的路径。

【亲测免费】 Terser 项目使用教程

gitblog_00150的博客

10-10

813

Terser 项目使用教程 1. 项目介绍 Terser 是一个用于 ES6+ 的 JavaScript 解析器、混淆器和压缩工具包。它主要用于压缩和混淆 JavaScript 代码，以减少文件大小并提高加载速度。Terser 是 uglify-es 的一个分支，保留了与 uglify-es 和 uglify-js@3 的 API 和 CLI 兼容性。主要功能解析器：支持 ES6+ 语法。 ...

探索Terser：JavaScript代码压缩的艺术

gitblog_00082的博客

03-20

642

探索Terser：JavaScript代码压缩的艺术 terser 项目地址: https://gitcode.com/gh_mirrors/ter/terser 是一个强大的JavaScript代码压缩工...

Javascript代码压缩混淆工具terser详解