缩小javascript文件大小之缩编、混淆
来源:互联网 发布:9分达人阅读 知乎 编辑:程序博客网 时间:2024/06/05 07:18
缩小javascript文件大小之缩编、混淆
写前端的相信都遇到过要提高网页的性能,其中javascript文件越小,浏览器的下载速度面对文件的读取和解析就更快。而一般我们在开发又需要一定的代码规范来使我们的代码更加的容易维护和读懂,但是大量空格和换行又会加大文件的大小,所以在发布时进行缩编或者混淆可以减小javascript的大小,提高效率。
一、缩编
缩编就是去掉javascript代码中的空格和换行符,从而减小文件大小的目的。我们可以使用JSMin来进行代码缩编。
JSMIN的安装
- 安装node
- 安装npm
安装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的安装
- 安装node
- 安装npm
安装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文件出错。有兴趣的可以去百度一下。
- 缩小javascript文件大小之缩编、混淆
- sqlserver 数据库缩小ldf数据库日志文件大小
- sqliteData重新导出以缩小文件大小
- 缩小sql2008/2005数据库ldf文件大小
- javascript 混淆
- 用javascript检查文件大小
- 关于javascript判断文件大小-
- javascript验证上传文件大小
- 关于javascript判断文件大小
- JavaScript判断文件大小
- javaScript格式化文件大小
- javascript 实现图片放大缩小
- javascript监测(控制 )上传文件大小
- 用Javascript判断上传文件大小
- IE下javascript获取文件大小
- [JavaScript]页面判断上传文件大小
- javascript混淆器
- javascript混淆续
- 快排之单FOR搞定
- 隐藏终端和暴露终端
- hdu 1242 Rescue (bfs+优先队列)
- js中setInterval与setTimeout的区别及换背景样例
- idea创建maven项目
- 缩小javascript文件大小之缩编、混淆
- 新手搭建Jenkins进行持续集成
- 按钮快速点击过滤处理
- iis设置允许或禁止访问的文件类型,以及能够解析的文件类型
- python实现二叉树,前序遍历,中序遍历,后续遍历
- Acticity生命周期——三大状态、七大方法
- 分布式事务的解决方案
- cs229-note2
- admin_move_table的重组机制验证(失败了)