性能优化插件

[lifesinger]

已经转移到 https://github.com/seajs/seajs-combo 和 https://github.com/seajs/seajs-flush

---

性能优化插件

前端的页面性能很重要，直接影响用户体验。Sea.js 除了异步加载能带来性能提升外，还专门提供以下插件来对页面性能进行调优。

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 时，同时加载 plugin-combo.js 即可：

<script src="http://path/to/??sea.js,plugin-combo.js"></script>

或者用 plugins 开启：

seajs.config({ 
  plugins: ['combo']
});

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

提示：其他需要线上使用的插件，都推荐通过 ??sea.js,plugin-xx.js,plugin-zz.js 的方式使用。

配置项

激活 combo 插件后，可以通过 comboSyntax 配置更改 combo 规则：

seajs.config({
  comboSyntax: ['?', '&']
})

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

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

seajs.config({
  comboExcludes: /jquery\.js/ // 从 combo 中排除掉 jquery.js 
})

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

seajs.config({
  comboExcludes: /.*/
})

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

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

测试页面

http://seajs.org/tests/specs/extensible/test.html?plugin-combo

flush 插件

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

使用场景

看代码：

seajs.use('a');
seajs.use('b');
seajs.use('c');
seajs.use('d');

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

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

使用方式

使用方式和 combo 插件一样，推荐以下方式：

<script src="http://path/to/??sea.js,plugin-flush.js"></script>

加载 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 插件的奥妙。这可以让我们在下载时机的控制上更灵活自由。

测试页面

http://seajs.org/tests/specs/extensible/plugin-flush/test.html

参考

• 曾经的讨论：flush 插件 #459

---

性能优化无极限。我相信通过 Sea.js 还可以进行很多其他优化，如果你有好的经验，欢迎以插件的方式分享出来。世界因分享而美丽。

[lifesinger]

有任何问题，欢迎留言交流。
注意：已解决的问题，会在整理后删除掉。