当我们使用JQuery
这样的库的时候,会发现通常会提供两个版本:开发调试就引入未压缩的开发版,正式发布就引入压缩后的生产版。那么要压缩自己的JS代码要怎么做呢? 把如何压缩JS代码作为第二个例子,是因为我以前在刚开始学习前端知识的时候就疑惑什么事生产版和开发版~新童鞋可以先了解,后理解。
使用UglifyJS
压缩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.");
复制代码
可以看到:
- 代码被压缩成了一行,
- 去掉了注释
text
转换成了o
- 单引号转换成了双引号,行尾还添加了一个分号
这些都是UglifyJS
处理的。很明显的这行代码,如果将函数名log转换成一个字母,体积还会再减小一点:
uglifyjs index.js -c -m -o index.min.js --toplevel
复制代码
--toplevel 会压缩最顶层作用域下的变量名,压缩后的代码:
var l;l="Hello.",console.log(l);
复制代码
实际上压缩过程做的更多,但仍不是最完美的。如果直接写成下面这样,就不需要压缩了:
console.log('Hello.')
复制代码
在webpack
里压缩JS代码
做项目要上线的时候,肯定不会手动的一个一个文件去压缩然后发布。当我们作为新人参与一个项目的时候,通常会有老司机配置好了工程环境,比如说基于webpack
。
在webpack
里压缩JS代码只需要配置好UglifyjsWebpackPlugin
(文档在这里:webpack.js.org/plugins/ugl…
小结
本篇涉及到的内容点有:
- 压缩JS文件
- 工具
UglifyJS
的基本使用和作用 UglifyJS
作为插件工作在webpack
中
本篇的例子是为了帮助理解JS代码压缩。没有接触过webpack
的童鞋可以参照官方文档来配置一下自己的项目尝试一下。入门至少要理解到什么是“代码压缩”,压缩的过程都做了什么。关于webpack
的内容,后续的例子会慢慢补充。