seajs之combo 插件

作者:zccst

flush插件

通过combo插件,我们可以对同一数组中的加载项进行合并加载。通过flush插件,我们可以更进一步减少HTTP请求数。

使用场景

看代码:

seajs.use('a');

seajs.use('b');

seajs.use('c');

seajs.use('d');

Sea.js默认会发送4个独立请求。

如果能在use调用时不发送请求,等到多次use后,在合适的时机统一触发就好了。这就是flush插件的用武之地。

使用方式

使用方式和combo插件一样,推荐以下方式:

<scriptsrc="http://test.com/??path/to/sea.js,path/to/seajs-combo.js,path/to/seajs-flush.js"></script>

注意:flush插件一般和combo插件一起使用。

加载flush插件后,就具有了seajs.flush方法。我们可以在合适的时机触发use的下载:

seajs.use('a');

seajs.use('b');

seajs.use('c');

seajs.flush();//在此处触发前面的use下载:http://path/to/??a.js,b,js,c,js

seajs.use('d');

seajs.use('e');

seajs.flush();//此处触发的下载是:http://path/to/??d.js,e.js

通过上面的示例,我相信你已经明白了flush插件的奥妙。这可以让我们在下载时机的控制上更灵活自由。

combo插件

减少HTTP请求数是性能优化中非常重要的一条准则。使用combo插件,配合服务器的nginx-http-concat服务(安装指南),可自动对同一批次的多个模块进行合并下载。

一、使用场景

seajs.use(['a','b'],...);

require.async(['a','b'],...);

define('id',['a','b'],...);

上面这些场景中的a.js和b.js可以合并成http://example.com/path/to/??a.js,b.js一起下载。

二、引入方式

使用很简单,只要加载sea.js时,同时加载seajs-combo.js即可:

<scriptsrc="http://test.com/??path/to/sea.js,path/to/seajs-combo.js"></script>

或者在sea.js之后用script引入:

<scriptsrc="path/to/sea.js"></script>

<scriptsrc="path/to/seajs-combo.js"></script>

推荐用??path/to/sea.js,path/to/seajs-combo.js的方式激活,这可以少一个请求。

提示:其他需要线上使用的插件,都推荐通过??path/to/sea.js,path/to/seajs-xxx.js的方式使用。

三、配置项

comboSyntaxArray

加载combo插件后,可以通过comboSyntax配置更改combo规则:

seajs.config({

comboSyntax:['?','&']

})

上面的配置,会将combo规则改成类YUILoader的形式:http://example.com/path/to/?a.js&b.js

comboExcludesRegExp|Function

可以通过comboExcludes排除掉特定文件:

seajs.config({

comboExcludes:/jquery\.js///从combo中排除掉jquery.js

})

comboExcludes可以是正则,也可以是一个函数:

seajs.config({

comboExcludes:function(uri){

//某些特定目录下的文件不合并

if(uri.indexOf('/some/path/')>0){

returntrue

}

}

})

在激活combo插件后,如果需要临时禁用combo,可以

seajs.config({

comboExcludes:/.*/

})

上面的配置把所有文件都排除掉了,因此combo也就不生效了。

提示:combo插件已经做了去重等处理,已经下载或正在下载的,不会重复下载。

comboMaxLengthNumber

combo后的URL地址太长时,IE以及有些服务器的配置会不支持。目前最佳经验值是不超过2000个字符。

seajs.config({

//将comboURL的最大长度修改为1000个字符

comboMaxLength:1000

})

四、测试页面

http://seajs.github.io/seajs/tests/specs/extensible/test.html?seajs-combo

如果您觉得本文的内容对您的学习有所帮助,您可以微信:

相关推荐