艺灵设计

全部文章
×

minify实战之合并css和js减少网站http请求数

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2016-08-28 21:57:14 - 阅: - 评:0 - 积分:0

摘要:
  虽然淘宝的Tengine功能很强大但我还是选择了minify来优化网站的css和js文件,minify可以将网站中多个css或js路径合并成一个,从而降低了http请求数量来达到优化网站的目的......

今天突然抽风,然后折腾了一下minify2.2.0,虽然花费了一个下午的时间,但终归还是有所收获的。

一、minify是干啥的

简单点来说,minify可以优化网站的加载速度,再详细点就是可以将多个js或css的路径进行合并成一个,从而减少http请求数量。至于详细的解释,请各位看官自行谷歌、百度等。其实我最先搜索到的是淘宝的Tengine......

二、下载minify

github上的地址:github.com/mrclay/minify,进去后点击download进行下载。配图一张:从github上下载minify

三、如何使用minify

如何使用才是关键!虽然网上有很多教程,但时代都比较久远,翻看了好多一样的文章,基本上全是下载后将min放网站根目录中,然后去访问这个目录就可以了。可能是偷工减料了,亦或者是老版本的教程吧。后来找了好久,终于找到个比较完整的教程。地址:blog.kuoruan.com/4.html

下面将完整的演示下这个minify,本地环境为win7+wamp

3.1、上传文件

建议看官先在本地环境中练下手,以免服务器上会出现各种坑爹问题。虽然概率很低,但我还是中彩了!!!这个后面再说。我们先来解压下文件,解压后的目录图: 可以将整个minify-2.x文件夹上传,也可以进去只上传里面的min文件夹。建议修改文件名字,以免与其它文件重名。附艺灵本地配图: 

3.2、修改config.php文件

进入我们刚才的目录minify-2.x中,打开config.php这个文件,略改代码。

3.2.1、大约13行

  1. $min_enableBuilder = ture;/*打开Minify URI Builder*/

注意上面黄色高亮部分,将默认的false修改成true。配图: 

3.2.2、大约26行

  1. $min_builderPassword = 设置登录密码;/*默认是admin*/

密码的话可以随便设置,建议复杂点。配图: 

3.3、修改builder/index.php文件

修改完config.php文件后,我们还要修改下builder/index.php

大约在173行,注释或删除掉google的jquery库。因为这个被墙了,正常访问的话是连接不上的,所以这个页面会等待很久很久很久才能打开。

虽然注释掉了jquery库,但在下一行是引用有本地jquery-1.6.3.min.js文件的。配图: 

3.4、访问builder/index.php文件

在地址栏中输入环境地址,例如艺灵的:http://127.0.0.1:8081/ylsj/minify2.x或者是http://127.0.0.1:8081/ylsj/minify2.x/builder/index.php,此时会有一个弹窗提示登录。我们输入刚设置的密码就可以愉快的登录了。配图: 吐槽一下,本地测试正常,在服务器上一直反复需要登录,就是登录成功后又跳转到登录画面,好坑爹啊!至于原因不知道,但最终我还是解决了问题,虽然没有登录。

当我们点击登录按钮并成功登录后会显示这样一个主界面: 

接下来就是操作了,我们粘贴自己网站的cssjs路径,点击Add file +后可进行增加一组操作,当操作完成后,点击Update就可以生成合并后的链接了。艺灵这里将两个js链接合并成一个,配图:在minify中添加js路径后生成合并路径

经测试发现,合并后的css文件会被压缩,但压缩的并不是太好,会存在断行现象,不知道是设置问题还是什么,反正最后是能用了。

四、在服务器上使用minify

如果看官在本地按艺灵的教程练习一遍后,可以在服务器上操作了。但艺灵在服务器上却遇到了麻烦。竟然无限循环登录,这不坑爹嘛!!!后来解决的方法也很简单,换了个方法:先在本地合并路径,然后修改下合并后的域名,最后在线上直接使用。目前已使用这种方法暂未发现问题。

----------完----------

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:/xwzj/2016-08-28/434.html

若亲不想直保留地址,含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载,随便修改,但请尊重艺灵的劳动成果!谢谢理解。

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: minify使用教程 合并cssjs 压缩js 淘宝Tengine http请求 优化网站 php 服务器优化

上一篇: 免费领取SSL证书并让网站支持https协议   下一篇: 统计代码陷阱之无形中影响了网速

评论区