2023年7月7日发(作者：)

如何压缩JS代码？当我们使⽤JQuery这样的库的时候，会发现通常会提供两个版本：开发调试就引⼊未压缩的开发版，正式发布就引⼊压缩后的⽣产版。那么要压缩⾃⼰的JS代码要怎么做呢？ 把如何压缩JS代码作为第⼆个例⼦，是因为我以前在刚开始学习前端知识的时候就疑惑什么事⽣产版和开发版~新童鞋可以先了解，后理解。使⽤UglifyJS压缩JS代码1、创建⼀个命名为 的⽂件，内容如下：// 注释function log(text) { (text)}log('Hello.')复制代码2、全局安装UglifyJS包（前提是先安装NodeJS环境）npm install uglify-js -g复制代码3、运⾏uglifyjs命令压缩⽂件，⽣成⼀个名为的⽂件(uglifyjs命令的⽂档可以参见这⾥：)uglifyjs -c -m -o 复制代码压缩后的JS代码：function log(o){(o)}log("Hello.");复制代码可以看到：1. 代码被压缩成了⼀⾏，2. 去掉了注释3. text转换成了o4. 单引号转换成了双引号，⾏尾还添加了⼀个分号这些都是UglifyJS处理的。很明显的这⾏代码，如果将函数名log转换成⼀个字母，体积还会再减⼩⼀点：uglifyjs -c -m -o --toplevel复制代码--toplevel 会压缩最顶层作⽤域下的变量名，压缩后的代码：var l;l="Hello.",(l);复制代码实际上压缩过程做的更多，但仍不是最完美的。如果直接写成下⾯这样，就不需要压缩了：('Hello.')复制代码在webpack⾥压缩JS代码做项⽬要上线的时候，肯定不会⼿动的⼀个⼀个⽂件去压缩然后发布。当我们作为新⼈参与⼀个项⽬的时候，通常会有⽼司机配置好了⼯程环境，⽐如说基于webpack。在webpack⾥压缩JS代码只需要配置好UglifyjsWebpackPlugin（⽂档在这⾥：⼩结本篇涉及到的内容点有：压缩JS⽂件⼯具UglifyJS的基本使⽤和作⽤UglifyJS作为插件⼯作在webpack中本篇的例⼦是为了帮助理解JS代码压缩。没有接触过webpack的童鞋可以参照官⽅⽂档来配置⼀下⾃⼰的项⽬尝试⼀下。⼊门⾄少要理解到什么是“代码压缩”，压缩的过程都做了什么。关于webpack的内容，后续的例⼦会慢慢补充。