0

现在的网站使用了大量的js和css文件,看大家都在使用压缩文件、合并文件、CDN等技术来加速页面,但是现在有几个问题:
1.压缩文件、合并文件有什么比较合适的工具,开发阶段文件可能经常要修改
2.合并文件可以减少HTTP请求,那么对于Jquery这样的js类库来说,是采用合并文件的方式,还是采用CDN比较合适?

2015-12-13 提问
3 个回答
1

已采纳

CDN

jQuery之类的常用库,推荐采用CDN,因为有可能别的网站已经缓存过了,所以在你这儿都不用下载。

百度静态资源库

资源压缩与合并

压缩文件、合并文件的话,推荐使用webpack打包。
webpack能把所有的js,css文件合并成一个js。能有效减少http的并发连接数。
举个实际例子,这是我之前一个页面中引用的JS和CSS文件。

之前的
这个是使用Webpack打包后的。
之后的

Webpack傻瓜式指南(一)

小图片的优化

如果小图片过多,推荐使用css sprite。这个教程很多,百度一下就有了。

1

如果想在服务端处理,可以使用pagespeed,可以支持:

  • Collapse Whitespace(压缩空白):通过把HTML网页中的多处连续空白换成一处空白,减少带宽使用量。

  • Combine CSS(合并CSS):通过把多个CSS文件合并成一个CSS文件,减少HTTP请求数量。 Combine

  • JavaScript(合并JavaScript):通过把多个JavaScript文件合并成一个JavaScript文件,减少HTTP请求数量。

  • Cache(扩展缓存):通过优化网页资源的可缓存性,减少带宽使用量。 Flatten CSS

  • Imports(精简CSS导入):通过删除CSS文件中的@import,减少HTTP请求往返次数。 Lazyload

  • Images(延时加载图片):延时加载在客户端浏览器上看不见的图片。 Minify

  • JavaScript(缩小JavaScript):通过缩小JavaScript,减少带宽使用量。 Optimize

  • Images(优化图片):通过引入更多的内嵌图片、压缩图片,或者将GIF图片转换成PNG图片,优化图片分发。 Pre-Resolve

  • DNS(预解析DNS):通过预解析DNS,缩短DNS解析时间。 Prioritize Critical

  • CSS(优化加载关键CSS规则):重写CSS文件,以便首先加载渲染页面的CSS规则。

如果是在开发端的话,需要一些相关的开发环境消息,如Java还是Node.js,或者?

0

可以动态压缩合并,然后用memcache缓存。这样更新的时候删除memcache就好了。
给个lua用于合并的脚本。压缩功能网上很多。我这里是已经压缩好的。

<link rel="stylesheet" type="text/css" media="screen" href="/vmerge.css?/style/all.css&/style/model/style.css&/style/common/base.css&/v4/index.css" />
 <script src="/vmerge.js?/js/apps/alldz.js&/v4/index.js" type="text/javascript" charset="UTF-8"></script>

location ^~ /vmerge {
set_md5 $kmd5 $host$query_string;
set $key mrg$kmd5;
content_by_lua_file conf/merge.lua;
  }
local uri=ngx.var.uri;

local res;
local cjson=require("cjson");
ngx.header.content_type="text/html";
if string.sub(uri,-3) == ".js" then
ngx.header.content_type="application/x-javascript; charset=utf-8";
else
ngx.header.content_type="text/css";
end
local split = function(s, p)
    local rt= {}
    string.gsub(s, '[^'..p..']+', function(w) table.insert(rt,{ w}) end )
    return rt

end
--local ret = ngx.location.capture("/memcmd?cmd=get&key=".. ngx.var.key);
local ret={status=1};--注释上面这行用于调试开发,直接合并,不从memcache读。发布时候注释这行
if ret.status == 200 then
res=ret.body or "";
else
local list=split(ngx.var.query_string,"&");
local res1,res2,res3,res4,res5,res6 =ngx.location.capture_multi(list);
if res1.status==200 then


res=res1.body.."\n"..(res2 and res2.body or '').."\n"..(res3 and res3.body or '').."\n"..(res4 and res4.body or '').."\n"..(res5 and res5.body or '').."\n"..(res6 and res6.body or '');
ngx.location.capture("/memcmd?cmd=set&key=".. ngx.var.key .."&val=".. ngx.escape_uri(res));
else
res='error'..cjson.encode(res1);
end
end
ngx.say(res);

撰写答案

推广链接