首页 > 其他分享 >合并多个js,css文件的方法:在服务端合并js和css文件

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

时间:2022-11-22 11:14:09浏览次数:77  
标签:文件 Minify min 合并 js css

合并所有的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,下面会给出引用代码,类似这个样子

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

  1. 你可能会嫌上面的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来生成的。

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

看起来简洁许多吧~

合并多个js,css文件的方法(二):在服务端合并js和css文件
http://www.cnblogs.com/chinafine/articles/2224028.html

下载地址:http://www.jb51.net/codes/67229.html

压缩 JavaScript 和 CSS,是为减少文件大小,节省流量开销;合并 JavaScript 和 CSS,是为了减少请求数量,减轻服务器压力。而这些枯燥又没有技术含量的工作,我们以前通常会手动处理,费时又费力。其实这些工作可以让一些工具为我们代劳,比如说,今天我推荐的这个工具—— Minify。

首先,先来看一下 Minify 在我的 WordPress 上使用的效果吧。

上图是本站首页的 JS 请求,从图中可以看出,这一个 JS 请求中,合并了 jquery.js,jquery-ui.js,public.js,index.js 这四个 JavaScript 文件,同理,CSS 文件的合并压缩形式也是如此。

那我们怎么使用 Minify 呢?Minify 是 Google Code 上的一个开源项目,我们可以前往这里围观。安装方法如下:

1、下载 Minify 并把 min 文件夹上传至你的主题文件夹下。 
2、配置 Minify,编辑 config.php 文件,可依据注释配置。(不配置也可使用 Minify) 
3、修改引入的 JavaScript 和 CSS 的链接地址。比如:

之前我在首页需要引入四个 JavaScript 文件:

       

而现在,我只需引入这一个 JavaScript 文件即可:

 

这样一来,就可以简单地完成了从服务器端在线合并压缩 JavaScript 和 CSS 文件,可能你已经看出来了,Minify 并不只是针对 WordPress 可用,只要你的服务器有 PHP5 的环境就可以使用,所以你也可以在其他项目中或工作中使用它,会减轻你的工作量,提高项目质量。
截图:

标签:文件,Minify,min,合并,js,css
From: https://www.cnblogs.com/asqq8/p/16914466.html

相关文章

  • JS有哪些变态语法,你知道吗?
    JS作为一门如此灵活的语言,自然在编码时给我们带来了很多方便,但方便的同时,也衍生出了很多变态的语法,下面我们来梳理一些常见的变态语法,希望你下次在某位大牛的代码中看到这......
  • js设计模式=封装
    js封装案例【1】<script>varBook=function(num){varnum;//类私有变量varname;//类私有变量functioncheck(){};//类私有方法this.checkName=functio......
  • JSON
    概念键值对一般形式<pid="jname"></p>varx={"name":"value"};//其中key是namedocument.getElementById("jname").innerHTML=x.name;数组varx={......
  • ffmpeg合并m3u8 ts key文件 解决Invalid data found when processing input错误
    首先我先说明一下我的使用场景和错误原因:我使用IDM从网站中批量下载ts文件,然后下载对应的一个.m3u8文件(ts文件列表和加密信息的描述)和一个key.key文件(秘钥)。以上文件全部......
  • css 实现移动端横向滚动条隐藏但还可以滚动的效果
    1、首先添加一段html代码:<divclass="scroll"><divclass="item">1</div><divclass="item">2</div><divclass="item">3</div><divclass=......
  • EsayExcel导出合并单元格(工具类)
    导出合并单元格工具类1.main方法调用publicstaticvoidmain(String[]args){List<GroupExport<ScoreDemo,String>>groupExports=newArrayList<>()......
  • uniapp打包热更新wgt安装包中manifest.json中的vision版本不匹配
    app热更新后小米手机清除全部数据,然后重启app,app重新执行热更新这是后就会提示WGT安装包中manifest.json文件的version版本不匹配,查看plus.runtime.version果然变成......
  • js逆向
    内存漫游唐志远/ast-hook-for-js-RE(gitee.com)  hook.search("")  取值  原github  JSREI/ast-hook-for-js-RE:浏览器内存漫游解决方案(探索中...)(github.......
  • css基础概述和重点
     CSS层叠样式表css用来表现HTML一个应用或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网......
  • js 中 forEach 如何跳出循环?
    //1.for方法跳出循环functiongetItemByIdFor(arr,id){varitem=null;for(vari=0;i<arr.length;i++){console.log("for循环i",i);......