在服务端合并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>

看起来简洁许多吧~

最简单的css和js文件合并

随着web页面功能越来越多,css和js使用也越来越多。但是一个页面中js和css越多导致页面请求次数就越多,网络延迟也会加大。 网上有很多jss的压缩合并工具,但是都不是很方便。        其实...
  • robinhunan
  • robinhunan
  • 2016年02月23日 12:21
  • 2898

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

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

使用Minify在服务器端合并js/css

Minify 用于服务器端的JavaScript 和 CSS的合并压缩。 1. 首先从 Google code下载 Minify http://code.google.com/p/mi...
  • spring21st
  • spring21st
  • 2012年01月31日 18:50
  • 4515

java实现将js、css、图片合并到html

技术点:1、使用htmlparser解析html文件,得到html代码里的js、css、img链接 2、将相对路径的链接转变成绝对路径,并读取资源 3、将css和js合并到html 、 4、将...
  • taotao12312
  • taotao12312
  • 2017年08月18日 16:31
  • 315

CSS文件和Javascript文件的压缩

像JQuery一样来压缩我们的CSS和JS 我们都知道一般JQuery新版本发布的时候往往会有几个不同类型文件,比如原始版本文件、最小文件以及其他配合IDE智能提示的各种版本文件,前期我们使用JQu...
  • vchenpeng
  • vchenpeng
  • 2016年09月04日 23:39
  • 194

前端初级自动化---脚本,样式合并及压缩

下面分享一些小小的想法。1、开发过程中脚本的模块化。 这个过程可以使用seajs等模块化工具,然后配置nodejs 和grunt进行对应的模块压缩; 2、发布后的优化 假如大量使用多个第三方插件...
  • cdnight
  • cdnight
  • 2016年02月03日 15:07
  • 937

js 文件中,如何插入其它 js 、 css 文件

规范 Js 文件的引用方法,统一风格,高效编程。
  • lmn13
  • lmn13
  • 2011年05月25日 16:56
  • 8351

Java压缩JS、CSS并合并,网上收集汇总

代码一: import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; import java...
  • maci_hotesion
  • maci_hotesion
  • 2015年12月30日 01:03
  • 2677

ASP.NET MVC 中CSS JS压缩合并 功能的使用方法

通过压缩合并js文件和css文件,可以减少 服务器的响应 次数和 流量,可以大大减小服务器的压力,对网站优化有比较明显的帮助!压缩合并 css 文件和js文件是网站优化的一个 比较常用的方法. ASP...
  • u012778564
  • u012778564
  • 2014年01月01日 15:04
  • 1471

Grunt压缩、合并js/css文件

一、Grunt简介Grunt是一个基于命令的javascript工程命令行构建工具。 1. 官网:http://gruntjs.com/ 2. 中文网:http://www.gruntjs....
  • napoay
  • napoay
  • 2016年06月15日 08:31
  • 2023
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:在服务端合并js和css文件
举报原因:
原因补充:

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