SeaJS combo 插件 使用说明 | hongwei's blog[转]

原文地址：http://www./2015/01/seajs-combo-%E6%8F%92%E4%BB%B6-%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E/

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

使用场景

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

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

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

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

引入方式

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

<script src="http:///??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:///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./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; } });