如何压缩JS代码？

当我们使用JQuery这样的库的时候，会发现通常会提供两个版本：开发调试就引入未压缩的开发版，正式发布就引入压缩后的生产版。那么要压缩自己的JS代码要怎么做呢？把如何压缩JS代码作为第二个例子，是因为我以前在刚开始学习前端知识的时候就疑惑什么事生产版和开发版~新童鞋可以先了解，后理解。

1、创建一个命名为index.js 的文件，内容如下：

// 注释
function log(text) {
  console.log(text)
}
log('Hello.')

2、全局安装UglifyJS包（前提是先安装NodeJS环境）

npm install uglify-js -g

3、运行uglifyjs命令压缩文件，生成一个名为index.min.js的文件(uglifyjs命令的文档可以参见这里：www.npmjs.com/package/ugl…)

uglifyjs index.js -c -m -o index.min.js

压缩后的JS代码：

function log(o){console.log(o)}log("Hello.");

可以看到：

这些都是UglifyJS处理的。很明显的这行代码，如果将函数名log转换成一个字母，体积还会再减小一点：

uglifyjs index.js -c -m -o index.min.js --toplevel

--toplevel 会压缩最顶层作用域下的变量名，压缩后的代码：

var l;l="Hello.",console.log(l);

实际上压缩过程做的更多，但仍不是最完美的。如果直接写成下面这样，就不需要压缩了：

console.log('Hello.')

做项目要上线的时候，肯定不会手动的一个一个文件去压缩然后发布。当我们作为新人参与一个项目的时候，通常会有老司机配置好了工程环境，比如说基于webpack。

在webpack里压缩JS代码只需要配置好UglifyjsWebpackPlugin（文档在这里：webpack.js.org/plugins/ugl…

小结

本篇涉及到的内容点有：

本篇的例子是为了帮助理解JS代码压缩。没有接触过webpack的童鞋可以参照官方文档来配置一下自己的项目尝试一下。入门至少要理解到什么是“代码压缩”，压缩的过程都做了什么。关于webpack的内容，后续的例子会慢慢补充。