javascript - 前端页面如何优化合适？

Question

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

Answer 1

CDN

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

百度静态资源库

资源压缩与合并

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

这个是使用Webpack打包后的。

Webpack傻瓜式指南（一）

小图片的优化

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

Answer 2

如果想在服务端处理，可以使用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，或者？

Answer 3

可以动态压缩合并，然后用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);