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

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

招财猫_Martin

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

阅读量758

点赞数 14

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/promaster/article/details/139415348

Terser通过调用API来实现代码的压缩和优化功能

起源
通过API来调用
API调用过程中的一个隐含的技术点 - 异步调用和Promise对象
官方文档中的一个有点容易忽略和混淆的地方
关于Promise

起源

书接上回，对Terser的功能做了一个初步的探索。在官方的主页上，有API和CLI二种调用方式。下面先介绍API的调用方式。

通过API来调用

Terser官方对于API的调用示例如链接: Terser API Reference。下面我们通过几个文件来实验

minify.js

#!/usr/bin/env node
'use strict'

const fse = require('fs-extra')
const {
   
    minify } = require("terser");

// Global functions:

// terser minify - pms.libv3.js

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

招财猫_Martin

关注关注

14
点赞
踩
14

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

JavaScript 性能优化秘籍：从代码压缩到懒加载的技巧

数字魔方操控师的博客

05-03

JavaScript 性能优化是一个综合性的工作，涉及代码的各个方面，从代码压缩、变量作用域优化，到循环操作、DOM 操作的改进，再到懒加载技术的应用以及内存管理和性能监控分析。每一个优化点都可能对应用的性能产生积极影响。在实际开发中，开发者需要根据具体的应用场景和需求，灵活运用这些优化技巧，并持续关注性能表现，不断进行调整和优化。随着 JavaScript 技术的不断发展，新的优化方法和工具也会不断涌现，开发者应保持学习和探索的态度，以打造出性能卓越、用户体验良好的 Web 应用。

terser js代码混肴（用户界面选择版本）

专注Java领域与微服务架构，热爱人工智能与深度学习

09-24

594

防止浏览器的js/html/css代码被他人盗用。下述只实现了js的混肴。html/css可仿照js逻辑实现。

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

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

招财猫_Martin 的专栏

05-29

884

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

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

weixin_42605397的博客

09-24

2560

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

Webpack: Terser与代码压缩

Wang的专栏

07-01

2992

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

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

聪明勇敢有力气的博客

02-15

3249

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

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

gitblog_00006的博客

03-20

878

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

掌握JavaScript压缩技巧，优化项目文件大小

Google Closure Compiler能够通过API调用或使用其提供的命令行工具来执行压缩任务。它特别擅长于优化JavaScript代码的执行效率，并且支持检查代码中潜在的错误。 ### 4. 使用Webpack进行代码打包 Webpack是一个现代...

※JavaScript代码压缩及文档制作工具[本本作品]

04-12

这些工具不仅能压缩代码，还能进行类型检查和错误检测，提高代码质量。 Closure Compiler是一个强大的JavaScript编译器，它提供了高级优化选项，可以将ES6+语法转换为更小的ES5代码。UglifyJS则是一个轻量级的工具...

JavaScript性能优化技巧分享共8页.pdf.zip

11-21

配合UglifyJS、Terser等工具进行代码压缩，删除空格、注释和未使用的变量，进一步减小文件体积。 10. **预编译模板语言**：对于Vue、React等框架，使用模板预编译可以生成更高效的JavaScript代码，减少运行时解析和...

terser作为js代码压缩工具

莫问前程F1的博客

08-21

7167

# 全局安装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.

terser-brunch:用于早午餐文件的 javascript 压缩器

07-24

早午餐向添加支持。该插件将缩小您的 JavaScript 文件。支持现代语言功能。以前称为uglify-js-brunch 。用法使用npm install --save-dev terser-brunch通过 npm 安装插件。要指定，请使用config.plugins.terser对象，例如： module . exports = { // ... plugins : { terser : { mangle : false , compress : { global_defs : { DEBUG : false , } , } , } , } , } ; 可以使用ignored选项忽略并传递连接的文件： module . exports =

压缩 js 代码就用 terser

开心学前端 : )

07-03

6741

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

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

最新发布

成长的烧年

04-01

980

Terser 支持将配置项放在单独的配置文件中，便于管理。用于生成 source map 文件，便于调试。

使用Terser混淆js代码

buhaisao321的博客

08-16

543

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

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

gitblog_00082的博客

03-20

646

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

webpack对js进行压缩处理

weixin_44785498的博客

02-23

1318

webpack对js进行压缩处理目前针对 webpack 配置有两个插件可以选择 uglifyjs-webpack-plugin terser-webpack-plugin 1 uglifyjs-webpack-plugin 使用 npm install uglifyjs-webpack-plugin --save-dev webpack配置 plugins: [ //删除dist_h5目录 new cleanWebpackPlugin(['dist_h5'], { root: pat

terser是uglifyjs的升级版

u010741112的博客

05-30

848

使用terser-webpack-plugin （npm i terser-webpack-plugin）因为uglifyjs不支持es6语法，所以用terser-webpack-plugin替代uglifyjs-webpack-plugin terser-webpack-plugin 目前最新的版本打包会有兼容问题请使用4.x版本（20201130） terser-webpack-plugin的5.x版本是对应webpack5.x所以如果打包失败注意下版本哦可参考博文： https://blog.cs

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

gitblog_00640的博客

10-10

1149

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