减少 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 即可:
<script src="http://test.com/??path/to/sea.js,path/to/seajs-combo.js"></script>
或者在 sea.js 之后用 script 引入:
<script src="path/to/sea.js"></script>
<script src="path/to/seajs-combo.js"></script>
推荐用 ??path/to/sea.js,path/to/seajs-combo.js 的方式激活,这可以少一个请求。
提示:其他需要线上使用的插件,都推荐通过 ??path/to/sea.js,path/to/seajs-xxx.js 的方式使用。
配置项
comboSyntax Array
加载 combo 插件后,可以通过 comboSyntax 配置更改 combo 规则:
seajs.config({
comboSyntax: ['?', '&']
})
上面的配置,会将 combo 规则改成类 YUI Loader 的形式:http://example.com/path/to/?a.js&b.js
comboExcludes RegExp | Function
可以通过 comboExcludes 排除掉特定文件:
seajs.config({
comboExcludes: /jquery\.js/ // 从 combo 中排除掉 jquery.js
})
comboExcludes 可以是正则,也可以是一个函数:
seajs.config({
comboExcludes: function(uri) {
// 某些特定目录下的文件不合并
if (uri.indexOf('/some/path/') > 0) {
return true
}
}
})
在激活 combo 插件后,如果需要临时禁用 combo,可以
seajs.config({
comboExcludes: /.*/
})
上面的配置把所有文件都排除掉了,因此 combo 也就不生效了。
提示:combo 插件已经做了去重等处理,已经下载或正在下载的,不会重复下载。
comboMaxLength Number
combo 后的 URL 地址太长时,IE 以及有些服务器的配置会不支持。目前最佳经验值是不超过 2000 个字符。
seajs.config({
// 将 combo URL 的最大长度修改为 1000 个字符
comboMaxLength: 1000
})
测试页面
http://seajs.github.io/seajs/tests/specs/extensible/test.html?seajs-combo
合并请求并添加max-age
var re_cdn_request_uri = /\w+\.r\d+\.(?:js|css)/;// 匹配 xxx.r201501201234.js
seajs.config({
charset: 'utf-8',
comboSyntax: ['/c/=', ','] // for seajs-combo
});
seajs.on('fetch', function (req) {
var uri = req.requestUri || req.uri;
if (uri) {
if (re_cdn_request_uri.test(uri)) {
uri += (req.uri.indexOf('?') === -1 ? '?' : '&') + 'max_age=31104000';
}
req.requestUri = uri;
}
});