在服务端合并js和css文件

转载 2012年03月21日 09:17:07

YSlow会告诉我们,合并所有的js和css文件可以减少HTTP请求,这样能提升访问速度。

通常为了开发的方便,我们会把js按用途分类,这样就会有很多js文件,比如sablog的jscript文件夹里就有10几个文件,这样访问的时候就是10几个HTTP请求。

那么解决办法就是合并它们,对吧。可是这样有一个问题就是你需要保存所有文件的源文件,并且有修改的时候又要从新合并一次。

实际上我们可以更简单一点,让php去合并这些文件吧,同时我们也不用操心压缩这档子事了。这里就要提到一个开源的php项目,名字叫做Minify,它可以帮助你合并,精简,压缩和缓存Javascript以及CSS文件。

Minify的使用非常简单:

1. 把下载到的源码解压缩,把其中的min文件夹复制到Apache的DOCUMENT_ROOT目录下,即你的网站跟目录。

2. 然后打开min/config.php文件,注意下面一些选项

//去掉下面3项中的一项注释,设置缓存目录
//$min_cachePath = 'c:\\WINDOWS\\Temp';
//$min_cachePath = '/tmp';
//$min_cachePath = preg_replace('/^\\d+;/', '', session_save_path());
//设置缓存时间,以秒为单位,当然是越大越好
//但是更简单的方式是在URL最后加一串数字,比如/min/f=hello.css&123456
//这样Minify会自动把缓存时间设置成一年,当文件有更新时之需要修改URL后面的数字即可
$min_serveOptions['maxAge'] = 1800;
//f参数获取的文件个数限制,建议越大越好,但是会出现URL超长的问题
//如果文件很多的话建议使用g参数设置group
$min_serveOptions['minApp']['maxFiles'] = 10;

3. 下面你可以打开http://yourdomain/min/builder/,这里有一个工具可以帮助你生成引用URL。填好你要合并的js或css文件,点击Update,下面会给出引用代码,类似这个样子

<script type="text/javascript" src="/min/b=sa2/include&amp;f=jscript/show.js,jscript/jquery.js,jscript/common.js,
jscript/ajax.js,jscript/fiximage.js,syntaxhighlighter/scripts/shCore.js,
syntaxhighlighter/scripts/shBrush.js&20100724"></script>

把它放到你的<head></head>标签里,删掉原先的一堆脚本引用,好了,现在访问你的网站只有一个HTTP请求了。

4. 你可能会嫌上面的URL是不是太长了点,当然我们还有更好的方法,并且效率会更高。我们可以使用g参数

这个方法需要在min/groupsConfig.php里进行设置,比如刚才的那一堆js可以写成这样

return array(
    'js' => array('//sa2/include/syntaxhighlighter/scripts/shCore.js',
                  '//sa2/include/syntaxhighlighter/scripts/shBrush.js',
                  '//sa2/include/jscript/show.js',
                  '//sa2/include/jscript/jquery.js',
                  '//sa2/include/jscript/fiximage.js',
                  '//sa2/include/jscript/common.js',
                  '//sa2/include/jscript/ajax.js')
);

这段代码也是可以用上面提到的builder来生成的。

这样在你的网页中就只需要这样来引用了

<script type="text/javascript" src="/min/g=js&20100724"></script>

看起来简洁许多吧~

相关文章推荐

【js&css文件压缩】lua+icombo+nginx 服务端的压缩合并 -2

上一次我们是通过使用php的minify开源项目,来达到目标css和js文件的压缩以及合并。这一次我们将会通过在服务器端配置,达到同样的效果。 前提:首先我们需要先配置一下服务器的软件,nginx服...

在服务端合并和压缩JavaScript和CSS文件

转自:http://dancewithnet.com/2010/06/08/minify-js-and-css-files-in-server/在服务端合并和压缩JavaScript和CSS文件Web...

Web性能优化之动态合并JS/CSS文件并缓存客户端

在Web开发过程中,会产生很多的js/css文件,传统的引用外部文件的方式会产生多次的http请求,从而加重服务器负担且网页加载缓慢,如何在一次请求中将多个文件一次加载出来?接下来给大家介绍在ASP....

js css文件合并工具

  • 2016年04月26日 09:08
  • 7KB
  • 下载

Gulp压缩合并js/css文件,压缩图片,以及热更新教程

var gulp = require('gulp'); var concat = require('gulp-concat');//- 多个文件合并为一个; var minifyCss = requi...

grunt合并压缩js,css文件

利用grunt前端工具,合并压缩js、css文件等

如何封装JS和CSS文件为服务器端控件

在创建或修改布局复杂ASP.NET端控件时,大量的时间都是在编译,等待JIT,修改,编译,JIT... 这样一个循环中,而且两个编译常常还很耗费时间。特别地,当控件已集成在页面之中后,在出现一些布局效...

Gulp压缩、合并js/css文件,压缩图片以及热更新教程

Gulp压缩教程:(需全局安装gulp $ npm install gulp -g) 1、cdm进入项目根目录 npm init(生成一个package.json,保存当前项目的依赖) 2、安装相关...

[前端优化]使用Combres合并对js、css文件的请求

在前端优化的各种金律铁规中,“减少客户端对资源的请求”都会在其中出现,刚好最近对网站做一些优化,使用了一下Combres组件,有点心得,遂整理成文。 园子中也有几篇Combres组件的介绍,如:...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:在服务端合并js和css文件
举报原因:
原因补充:

(最多只允许输入30个字)