减少http请求数,有三个好处,即减少DNS请求所耗费的时间.、减少服务器压力、减少http请求头,因此这是我们前端性能优化的一个关键点。

对于我们前端来说,减少http请求数的一个途径就是合并js和css文件,称为combo,也称打包,也就是通过将多个文件压缩合并成一个文件,并缓存在服务器,然后一次性传输到客户端。这样可以有效地减少网站中所有页面的http请求数。

经研究发现,Google Code上有一个PHP的开源项目——minify,它可以合并、精简、Gzip压缩和缓存JavaScript和CSS文件。

Minify的使用主要有以下几个关键点:

1、将minify的min文件夹放入站点根目录下。

2、运行环境:Apache + PHP。

3、启用Apache的Mod Rewrite模块。

4、在min文件夹下新建.htaccess文件,并在其下添加如下Rewrite规则:

<IfModule mod_rewrite.c>

RewriteEngine on

RewriteRule ^([a-z]=.*)  index.php?$1  [L,NE]

</IfModule>

5、配置Minify,即编辑min/config.php文件,我们主要是设置缓存目录、缓存时间、可合并文件最大数量,其余的config.php文件中有叫详细的注释,恕不赘述。

6、使用方法:在我本地映射的域名下登录hoogle.fclub.cn/min,就可以将我们需要合并的文件一一添加,update后生成一串地址,如下图:

  其中b参数为文件本地目录,f参数为js或css文件名。熟悉了后也可以不通过界面update,直接写出合并后的地址。

  比如我们网站page_header.lbi中的前面8个js,现在这8个文件是放在本地,引入时直接用如下代码就相当与载入了8个js,http请求变成了一次。

<script type="text/javascript" src="/min/b=skins/js_new&f=jquery-1.4.2.js,utils.js,fclub.js,jquery.scrollTo.js,fclub_index.js,smoothAnchor.js,overlay.min.js,toolbox.expose.min.js,centerDiv.js"></script>

  这样即可以让这8个js文件合并、精简,然后通过gzip压缩成一个文件.gz文件并缓存在服务器中相应的文件夹中。

7、删除min/builder/index.php 文件或修改其文件名。防止他人通过“hoogle.flcub.cn/min”登录,如需通过界面生成引入地址,则让index.php恢复。

8、当需要调试js的时候,可以开启debug模式,首先在配置文件config.php中启用debug,再在引入地址中加入&debug=1,如下所示:

<script type="text/javascript" src="/min/b=skins/js_new&f=jquery-1.4.2.js,utils.js,fclub.js,jquery.scrollTo.js,fclub_index.js,smoothAnchor.js,overlay.min.js,toolbox.expose.min.js,centerDiv.js&debug=1"></script>

这样即可像单独引入一样快速定位到某一js的某一行,进行调试。

Hoogle 2011-12-11

新浪微博:http://www.weibo.com/yinuoba  欢迎关注。。。

  IT博客大赛投票邀请:https://blog.51cto.com/contest2011/1793311

转载于:https://blog.51cto.com/hoogle/739198

通过minify将项目中js和css文件的打包相关推荐

  1. Asp.net中Js、Css文件压缩辅助类

    类名:WebCompressUtility.cs 代码如下: /// <summary> /// Js.Css文件压缩辅助类 /// Stone_W /// 2011.6.21 /// & ...

  2. ios+打开本地html乱码,IOS 使用 WKWebView 加载本地的JS和CSS文件出现乱码问题

    ####发现问题 最近项目中使用到HTML5和原生的混合开发,项目在IOS10上面运行正常,在IOS8下遇到了兼容性的问题,HTML5页面可以加载出来,只是页面样式丢失,并且JS脚本执行不了,所以只能 ...

  3. Django中载入js和css文件

    Django中载入js和css文件 项目的文件夹结构例如以下: mysite |-mysite |-|-static |-|---js和css文件 |-|-|-init.py |-| |-models ...

  4. [css] 如何清除在项目中无用的css代码呢?

    [css] 如何清除在项目中无用的css代码呢? 1.IDE中,会对没有使用到的样式,自己进行检测,删除时候,还需要手动删除. 2.webpack中,有基于消除无用css的插件(purifycss-w ...

  5. web项目中js加载慢问题解决思路

    web项目中js加载慢问题解决思路 参考文章: (1)web项目中js加载慢问题解决思路 (2)https://www.cnblogs.com/cslj2013/p/8491786.html 备忘一下 ...

  6. 如何下载网页中使用的JS及CSS文件

    关键字:下载网页中使用的JS及CSS文件 方法一: 凡浏览过的网页都会临时保存在:C:\Documents and Settings\Administrator(当前登陆用户名)\Local Sett ...

  7. js html引入外部css文件,js中如何引入css文件?

    js中如何引入css文件?下面本篇文章给大家介绍一下使用JS引入css文件的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 1.使用document.write方式输出引入cs ...

  8. 合并多个js,css文件的方法:在服务端合并js和css文件

    合并所有的js和css文件可以减少HTTP请求,这样能提升访问速度. 通常为了开发的方便,我们会把js按用途分类,这样就会有很多js文件,比如sablog的jscript文件夹里就有10几个文件,这样 ...

  9. Visual Studio 编译任务压缩js和css文件

    如今网站都在说优化,压缩js和css文件就成了最基本的一种方法,js和css压缩有很多方法,很多网站也提供了这样的功能,也可以用YUI提供的包手动压缩,但是这都不效率啊,能不能在vs生成部署包的时候把 ...

最新文章

  1. YOLOv5 它来了!基于 PyTorch,体积比 YOLOv4 小 90%,速度却超 2 倍!
  2. HP CP1215打印机遇到spoolsv.exe错误。
  3. Linux入门教程:Linux权限管理
  4. 树莓派学习 -- 无法扫描出树莓派IP
  5. Linux(三)——mysql服务
  6. 学习分布式不得不会的BASE理论
  7. ln -s命令 linux,Linux下 ln -s 软链接用法
  8. 动画特效九:下拉刷新
  9. 看 设计模式之策略模式探讨初步 有感,并摘取部份内容,学习之
  10. 【机器学习】基础之线性代数(超详细总结)
  11. at91rm9200移植u-boot
  12. STM32蜂鸣器驱动程序
  13. Tomcat 日志概述
  14. 计算机卡死后自动关机,电脑经常卡住自动关机怎么办
  15. php 中%3cspan%3e,vue实战(4)——网站统计之——友盟百度统计
  16. cmd脚本win10使用schtasks命令实现定时任务
  17. Nginx 教程(一)-- 工作原理及安装配置
  18. 计算机系统结构复习(五):ILP指令集并行
  19. 《能屈能伸英特尔睿频加速技术深度解析》
  20. Oracle取小数点部分

热门文章

  1. mv命令(移动和重命名)
  2. jQuery获取Text和Value
  3. sql 语句 查询两个字段都相同的方法
  4. memcached 缓存服务器
  5. 物资管理信息系统5 -- 删除用户界面
  6. hh.exe的另类用法
  7. Excel Services的配置与使用(图解)
  8. 【漏洞复现】WordPress插件Quizlord 2.0 XSS漏洞复现与分析
  9. 用python实现微信消息群发和微信自动回复
  10. centOS下调整swap