缩小javascript文件大小之缩编、混淆

缩小javascript文件大小之缩编、混淆

写前端的相信都遇到过要提高网页的性能，其中javascript文件越小，浏览器的下载速度面对文件的读取和解析就更快。而一般我们在开发又需要一定的代码规范来使我们的代码更加的容易维护和读懂，但是大量空格和换行又会加大文件的大小，所以在发布时进行缩编或者混淆可以减小javascript的大小，提高效率。

一、缩编

缩编就是去掉javascript代码中的空格和换行符，从而减小文件大小的目的。我们可以使用JSMin来进行代码缩编。

JSMIN的安装

1. 安装node
2. 安装npm

3. 安装JSMIN

    命令行：npm install -g jsmin
   

   （相信现在的前端对node应该都是不陌生的，这里我就不做详细介绍，如果没了解过的建议去学一学）

JSMIN的使用

命令：jsmin -o 新文件名.js 要执行的js文件.js
例如：jsmin -o jsmin.js bootstrap.js

这里我用了bootstrap没有压缩过的bootstrap.js文件，可以看到，小了31.9%。

二、混淆

混淆是比更加高级的一种优化js代码的方法，他不仅能够去掉空格和换行，他还把一些全局变量或者是全局函数的名字重新定义为简短的名称。我们可以使用UglifyJS来进行代码混淆

UglifyJS的安装

1. 安装node
2. 安装npm

3. 安装UglifyJS

    命令行：npm install -g uglify-js
   

   （又是node了，你知道它多方便了没-。-）

UglifyJS的使用

UglifyJS我主要两种使用，第一种是直接-o属性，和jsmin差不多，就去掉空格和换行。还是用bootstrap。
    命令：uglifyjs 要执行的文件.js -o 生成的文件名.js
    例如：uglifyjs bootstrap.js -o uglifyjs.js

可以看到也是减小了，但是和jsmin的效果是差不多的。

---

第二种是加-m属性的，这个属性可以让一些变量被重命名，这样将大大的减少js文件的大小。还是用bootstrap.js来实验。（-o后面一定要跟生成的文件）
    命令：uglifyjs 要执行的文件.js -m -o 生成的文件名.js
    例如：uglifyjs bootstrap.js -o uglifyjs.js

可以看到缩小了44.9%，比前两个缩小了更加多的大小。 

三、总结：

这就是缩小js大小的两个方法，对于小的js文件来说，用什么其实差不多，对于比较庞大的js文件，那时用最后的方法比较的好。但是要求你的代码有一定要求，才不会再被进行重命名后引起了变量的冲突。还有一种GCC（Google Closure Compiler），这种可以更加的缩小js代码的量，更大规模更加的明显。但是我技术还差点，没法使用。

https://closure-compiler.appspot.com/home（可能需要翻墙）
这个网址就是GCC压缩的网站。之所以不使用他一个原因是要翻墙，还有一个原因是对代码的规范要求高，GCC在压缩之后破坏了原来了代码，如果没有很好的代码规范，将导致js文件出错。有兴趣的可以去百度一下。