Skip to content

如何通过Mod压缩独立的CMD源文件?

元彦 edited this page Jul 23, 2013 · 4 revisions

发觉QQ电影票H5页面的JS源文件只是移除了注释与空白,并没有进行深度的压缩,如下这个线上文件:

define(function(require,exports,module){var $=require("zepto"),MovieData=require("MovieData"),NavAction=require("NavAction"),iScroll=require("iScroll"),ctx=$('#cities_div'),hotCity=['北京','上海','广州','深圳'],isInit=false;function loadData(cityId){MovieData.loadCitiesDetail(function(cities){var city,c,charCity,letter,i,j;var cityObj={},hotCityArr=[],len=cities.length,htm=['<div class="common_list" style="padding:0;margin:0;-webkit-user-drag:none;-webkit-user-select:none"><h4 idx="热门">热门</h4><ul>'];for(i=0;i<len;i++){city=cities[i];if($.inArray(city.name,hotCity)>-1){hotCityArr.push(city);}else{c=city.pinyin.charAt(0).toUpperCase();if(!cityObj[c]){cityObj[c]=[];}
cityObj[c].push(city);}}
len=hotCityArr.length;for(i=0;i<len;i++){city=hotCityArr[i];htm.push('<li class="'+(city.id==cityId?'current':'')+'" data-cid="'+city.id+'" data-name="'+city.name+'"><a>'+city.name+'</a></li>');};htm.push('</ul>');for(i=65;i<=90;i++){letter=String.fromCharCode(i);charCity=cityObj[letter];if(charCity){htm.push('<h4 idx="'+letter+'">'+letter+'</h4><ul>');len=charCity.length;for(j=0;j<len;j++){city=charCity[j];htm.push('<li class="'+(city.id==cityId?'current':'')+'" data-cid="'+city.id+'" data-name="'+city.name+'"><a>'+city.name+'</a></li>');};htm.push('</ul>');}}
htm.push('</div>');ctx.height('').removeClass('loading');ctx.html('<div class="city_all"><h3>选择城市</h3><div id="cityList" style="overflow:hidden;position:relative;height:'+($(window).height()-45)+'px">'+htm.join('')+'</div></div>');new iScroll('cityList');});}
function addEventHandler(){ctx.on('click','.common_list li',function(e){var li=$(this);var cid=li.data('cid');var cname=li.data('name').trim();var args=NavAction.getModArgs();li.parent().parent().find('li.current').removeClass('current');li.addClass('current');NavAction.setCity(cid,cname);NavAction.showInfoPop('您已成功将当前城市设置为:'+cname,function(){if(args.mod){location.href='#sub='+args.mod;}});});}
exports.init=function(args){if(!isInit){isInit=true;addEventHandler();}
var cityId=localStorage.getItem("cityId");loadData(cityId);}});

可以揣测的原因是避免CMD中的require被重写,而seajs对依赖关系的判断正依赖于require这个关键词。 是的,require不能被改写,但其他变量完全可以。我们来看下如何通过Mod来深度压缩独立的CMD源文件,并且只不改写require变量名。

安装完Mod后,进入命令行模式:

$ mod compile cities.js  --no-combine
[compile] cities.js >> dist/cities.js

在瞧瞧深度压缩后的文件,require还在,good job:

define(function(require,e,t){function f(e){r.loadCitiesDetail(function(t){var r,i,a,f,l,c,h={},p=[],d=t.length,v=['<div class="common_list" style="padding:0;margin:0;-webkit-user-drag:none;-webkit-user-select:none"><h4 idx="\u70ed\u95e8">\u70ed\u95e8</h4><ul>'];for(l=0;l<d;l++)r=t[l],n.inArray(r.name,u)>-1?p.push(r):(i=r.pinyin.charAt(0).toUpperCase(),h[i]||(h[i]=[]),h[i].push(r));d=p.length;for(l=0;l<d;l++)r=p[l],v.push('<li class="'+(r.id==e?"current":"")+'" data-cid="'+r.id+'" data-name="'+r.name+'"><a>'+r.name+"</a></li>");v.push("</ul>");for(l=65;l<=90;l++){f=String.fromCharCode(l),a=h[f];if(a){v.push('<h4 idx="'+f+'">'+f+"</h4><ul>"),d=a.length;for(c=0;c<d;c++)r=a[c],v.push('<li class="'+(r.id==e?"current":"")+'" data-cid="'+r.id+'" data-name="'+r.name+'"><a>'+r.name+"</a></li>");v.push("</ul>")}}v.push("</div>"),o.height("").removeClass("loading"),o.html('<div class="city_all"><h3>\u9009\u62e9\u57ce\u5e02</h3><div id="cityList" style="overflow:hidden;position:relative;height:'+(n(window).height()-45)+'px">'+v.join("")+"</div></div>"),new s("cityList")})}function l(){o.on("click",".common_list li",function(e){var t=n(this),r=t.data("cid"),s=t.data("name").trim(),o=i.getModArgs();t.parent().parent().find("li.current").removeClass("current"),t.addClass("current"),i.setCity(r,s),i.showInfoPop("\u60a8\u5df2\u6210\u529f\u5c06\u5f53\u524d\u57ce\u5e02\u8bbe\u7f6e\u4e3a:"+s,function(){o.mod&&(location.href="#sub="+o.mod)})})}var n=require("zepto"),r=require("MovieData"),i=require("NavAction"),s=require("iScroll"),o=n("#cities_div"),u=["\u5317\u4eac","\u4e0a\u6d77","\u5e7f\u5dde","\u6df1\u5733"],a=!1;e.init=function(e){a||(a=!0,l());var t=localStorage.getItem("cityId");f(t)}})

从原版本的 2.05k 优化至 1.66k, 差别20%的流量,在移动端通过Mod简单的几步为用户节省20%的流量这是非常有必要的。

Clone this wiki locally