作者:zccst
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://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 即可:
<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
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
分享到:
相关推荐
seajs-combo-express Express 的组合插件(仅适用于 seajs)安装 $ npm install seajs-combo-express用法 var expr = require ( 'express' )var app = expr ( ) ;app . use ( require ( 'seajs-combo-express' ) ( ...
基于bootstrap的分页功能,可以点击,同时也是基于seajs的分页插件
相关seajs简介,插件制作及js源码插件、jquery插件转换seajs插件的方法等
seajs常见配置解析和常见插件的使用。sea.js,seajs-css.js,seajs-debug.js,seajs-preload.js,seajs-log.js等
SeaJS Web 端的js 模块加载器
前端开源库-grunt-react-seajsgrunt react seajs,一个将react组件转换为seajs模块的grunt插件
seajs-2.3.0.zip
knockout seajs .net中实战应用
gulp-combo-seajs一个用于 seajs(CMD) 模块合并工具的 gulp 插件。新特性支持require("xx.css")引入问题,ps:默认忽略掉该css文件的引入,所以不建议在js文件中require;以seajs.config的alias别名设置文件名命名...
自己在公司需要使用seajs,就学习了seajs写了个手册和demo,欢迎阅读。
seajs-css.js 用于seajs加载css文件,上课用的课件资源,大家有需要的可以随时下载。版本是非常好用的,作为一个学习模块化我们必须的知识插件
seajs-2.2.0源码
seajs下载,包含自己总结的用法和规范
seajs源码
seajs-5分钟上手。。。。。。...................................................。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
seajs入门完整案例,适合新手学习! seajs入门完整案例,适合新手学习!
seajs源文件以及一个帮助文档,文档介绍比较详细
开始学习seajs,模块化的js思想。SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现...
Bootstrap和seajs结合的分页器,绝对好用嗷
seajs3.0 源码注释,只是本人阅读源码的一些心得及简单注释。 或者直接查看 博文 查看模块加载过程的流程解释。