javascript - 前端页面如何优化合适?
PHP中文网
PHP中文网 2017-04-10 16:32:45
[JavaScript讨论组]

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

PHP中文网
PHP中文网

认证高级PHP讲师

全部回复(1)
PHP中文网

可以动态压缩合并,然后用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);
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号