js里面suiper.min是什么
.js 是JavaScript的源码文件。.js文件可读性好,便于调试和修改,但是其相对压缩后的.min.js所占用空间较大
.min.js 是JavaScript的源码文件压缩之后产生的文件。.min.js文件可读性差,所占用空间相对较小,可用于源码防窃
将.js压缩为.min.js主要包括两个方面:去掉无用的空格、换行符号、注释等,从而压缩js文件大小;将原.js中变量和函数的命名修改为没有实际意义的名称,进行语句的等价替换,如条件判断修改为使用三目运算符,从而尽可能实现源码防窃
JavaScript的代码压缩工具
在任意文件夹下按住shift按键的同时,点击鼠标右键
打开powershell命令窗口
执行命令: npm install uglify-js -g
首先,打开cmd
其次,查找要压缩的js文件,查找方法如下:
1、输入文件所在位置
例如,我需要压缩的文件在E盘中,就输入 e:
2、输入:cd + js文件所在位置
例如,我需要压缩的js文件在:E:\electron-vue\topology\static\new_node_modules\topology-vue
就执行:cd electron-vue\topology\static\new_node_modules\topology-vue
3、输入:uglifyjs + 要压缩的js文件名称 + -o + 压缩后js文件名称
例如,我要将topology-vue.umd.js文件压缩成topology-vue.umd.min.js
就执行:uglifyjs topology-vue.umd.js -o topology-vue.umd.min.js
你没看错!
就是这么简单!!
将JS文件进行压缩,让你的程序快马加鞭地跑起来吧!!!
这个站点里面有四个压缩引擎,一个YUI压缩,一个UglifyJS压缩,一个JSPacker压缩,和一个新的JsMin压缩。
一般用UglifyJS引擎压缩就可以。jQuery和好些其他的前端项目就是用他压缩的。
另外给个建议,你把你的JS文件用匿名函数的方式封装起来,对外只给一个接口。这样JS压缩引擎就可以把你匿名函数中不对外开放的内部变量名称都给替换成a,b,c,d这样的单字符,很能节省体积。
我们用站长工具的JavaScript-HTML格式化工具,我们打开页面,我今天要压缩的文件js文件:common.js ,把js代码复制到到JavaScript/HTML格式化工具里面如下图所示:
点击下面的“普通压缩”和“加密压缩”按钮,经过我的精心测试,使用“加密压缩”,对文件压缩率是最好的,所以点击“加密压缩”,压缩后如图:
javascript代码压缩后,我们就把这些代码在复制到common.js文件里面,在吧这个文件上传到空间原来的位置,进行访问是否存在一些错误,如果没有什么问题说明压缩成功;
我的common.js 文件压缩前和压缩后的对比:
压缩前:
压缩后:
文件压缩前和压缩后确实有明确的减少,说明压缩确实减少文件的大小,
我们来测试文件压缩前和压缩后所有能的时间做对比(我是用火狐插件测试传输速度):
压缩前所用时间:
压缩后所用时间:
压缩前所用时间是:125ms,压缩后所用时间:78ms ,文件压缩后给我们节省大量的时间,如果每个js都进行压缩,我们房子访问速度会更快的。
(注:html文件和javascript压缩原来一样的,当时压缩html要用到“普通压缩”按钮压缩)
二、压缩css文件:
我们打开站长工具的Css压缩/格式化工具页面,我要压缩的文件是五色旗保健品商城的css主文件style.css,首先我们打开站长工具的Css压缩/格式化工具页面 ,把style.css 代码放到Css压缩/格式化工具里面,如下图所示:
点击“压缩代码”按钮后,css代码压缩成功,如下图所示:
后边就是压缩后的css代码,你要不右边的代码复制到源文件style.css里面在上传到服务器空间里面,在访问一下网,看看网页样式有没有改变,如果有点变化就需要简单的调试一下,如果没有变样,说明你的css压缩成功了;
下面我们来看看styl.css文件压缩前和压缩后的大小和放在访问速度的大小:
文件大小对比:
压缩前:
压缩后:
压缩前30kb,压缩后23kb,明显的文件大小减小了
压缩前所用时间:
css压缩前的时间.jpg (7.36 KB, 下载次数: 0)
下载附件
css压缩前的时间.jpg
2013-11-2 00:35 上传
压缩后所用时间:
压缩前所用时间是:188ms,压缩后所用时间:93ms ,css压缩后明显的节省了95ms;
总结:一个大的网站可能会有很多的javascript和css,如果没有都进行压缩的话,一定会减少很多文件大小的,其实减少文件大少并不是很重要,最重要的是,文件容量减少了,能够快速的提高网站访问的速度,给用户带来好的体验,我们尽量的把文件压缩到最小,这样才有利于用户快速的打开网站,至此我的五色旗保健品商城优化后,我的每天的访问量也增加了很多。
如果是没有混淆的,你可以试试用js的格式化工具来重新格式化一下的,比如:
var Inote = {}
Inote.JSTool = function(options) {
this.options = options || {}
}
Inote.JSTool.prototype = {
_name: 'Javascript工具',
_history: {
'v1.0': ['2011-01-18', 'javascript工具上线'],
'v1.1': ['2012-03-23', '增加混淆功能'],
'v1.2': ['2012-07-21', '升级美化功能引擎'],
'v1.3': ['2014-03-01', '升级解密功能,支持eval,window.eval,window["eval"]等的解密'],
'v1.4': ['2014-08-05', '升级混淆功能引擎'],
'v1.5': ['2014-08-09', '升级js压缩引擎'],
'v1.6': ['2015-04-11', '升级js混淆引擎']
},
options: {},
getName: function() {return this._name},
getHistory: function() {
return this._history}
}
var jstool = new Inote.JSTool()
1. 压缩
这一操作的目的,是让最终代码传输量 (不代表代码量, 也不代表文件体积)尽可能小。压缩js的工具,常见的有:YUI Compressor、UglifyJS、Google Closure Compiler 等。
通常在代码压缩的过程中,只改变代码的语法,代码的语义和控制流不会有太大改变。
常见做法是把局部变量缩短化,把一些运算进行等价替换等。代码压缩对于代码保护有一些帮助,但由于语义和控制流基本没变,起不了太大作用。
在压缩层面上,代码不可读只是一种附带伤害,不是最终目的。
2. 混淆
这一操作的目的,是让代码尽可能地不可读,主要用作代码保护。
让代码不可读,增加分析的难度,这是唯一目的。混淆过后文件体积变大一倍也没关系,代码量变多也没关系,运算慢50% 也没关系。
常见的做法有:分离常量、打乱控制流、增加无义代码、检查运行环境如果不对就罢工,等等。
在混淆层面上,代码不可读是最终目的。
值得一提的是,Google Closure Compiler 的 Advance Level Compression 会压缩类和对象的成员,其压缩结果很难分析,也可以认为是一种混淆,但兼容性不太好。
3. 加密
有加密就有解密,意味着加密操作可逆,密文可以明文化。
在Web界,可以称之为加密的东西包括:HTTPS传输、JavaScript实现对称加密或者不对称加密等等。
1、在服务器上启用GZIP压缩,添加css等静态文件等。
2、把主页、内容页的CSS分开写,公共部分单独用一个CSS,这样就可以减少CSS的大小。
3、优化CSS语法,并可以使用工具压缩,但要注意用多个浏览器测试。
4、将一些JS调用尽量放到网页底部