`
zccst
  • 浏览: 3315180 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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 插件一样,推荐以下方式:

<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)

    seajs-combo-express Express 的组合插件(仅适用于 seajs)安装 $ npm install seajs-combo-express用法 var expr = require ( 'express' )var app = expr ( ) ;app . use ( require ( 'seajs-combo-express' ) ( ...

    seajs-2.3.0.zip

    3. **与构建工具的集成**:如Gulp、Grunt等,可以结合seajs-combo插件进行模块合并和压缩,提高生产环境的性能。 五、Seajs的应用场景 1. **大型Web应用**:在大型项目中,通过Seajs可以有效管理代码,实现模块化...

    seajs_2.3.0以及学习文档

    5. **插件机制**:Seajs 社区有丰富的插件资源,如数据交互插件 seajs-data,优化工具 seajs-combo,以及与其它库集成的插件等,扩展了 Seajs 的功能。 在 `seajs.docx` 文件中,你可能会找到以下内容: 1. **...

    node+seajs+grunt标准资源

    为了整合Node.js、Sea.js和Grunt,我们需要在Gruntfile.js中配置相应的插件,如`grunt-contrib-concat`用于合并文件,`grunt-contrib-uglify`用于压缩JavaScript,以及可能的`grunt-seajs-combo`插件来处理Sea.js的...

    JavaScript模块化开发库之SeaJS

    - SeaJS提供了丰富的插件系统,如seajs-combo用于合并压缩代码,seajs-text用于加载文本资源等,这些工具可以帮助开发者提高开发效率,优化生产环境的性能。 - 使用SeaJS时,可以结合构建工具(如Gulp、Webpack等...

    gulp-combo-seajs:适用于gulp的seajs(CMD)模块组合插件

    gulp-combo-seajs一个用于 seajs(CMD) 模块合并工具的 gulp 插件。新特性支持require("xx.css")引入问题,ps:默认忽略掉该css文件的引入,所以不建议在js文件中require;以seajs.config的alias别名设置文件名命名...

    前端开源库-fis3-prepackager-seajs-combine

    combo: true, // 开启组合加载 base: './', // 模块基础路径 charset: 'utf8' // 文件编码 } }); ``` 最后,执行FIS3的构建命令,例如: ```bash fis release -d ./output ``` 这样,FIS3就会根据配置将Seajs...

    grunt构建基于seajs的网站实现

    - `grunt-seajs-combo`:专门针对Sea.js的插件,可以合并并压缩Sea.js模块。 6. **目录结构**: 文件名称列表中的`index.html`通常是项目的入口文件,`Gruntfile.js`存放自动化任务配置,`node_modules`存储Grunt...

    seajs_source:SeaJS原始阅读笔记

    SeaJS拥有丰富的插件生态系统,如`seajs-text`用于加载文本资源,`seajs-style`用于加载CSS文件,以及各种构建工具和打包工具,如`seajs-combo`用于合并模块以减少HTTP请求,`seajs-logger`用于调试等。 5. **模块...

    程序员面试刷题的书哪个好-example-plugin-storage:seajs插件存储示例

    插件内置combo支持,对combo请求亦可版本管理和获取后细粒度拆分存储。 插件github地址: 插件源来 如果大家还记得我发的年中总结,其中里面提及了我们存储方案上的设定。 回顾一下: cookie + localStorage ...

    程序员面试刷题的书哪个好-seajs-plugin-storage.js:seajs-plugin-storage.js

    插件内置combo支持,对combo请求亦可版本管理和获取后细粒度拆分存储。 插件github地址: 插件源来 如果大家还记得我发的年中总结,其中里面提及了我们存储方案上的设定。 回顾一下: cookie + localStorage ...

    Web前端模块化组件seajs-3.0.0版

    Sea.js 还提供了 combo、flush 等插件,配合服务端,可以很好地对页面性能进行调优。 跨环境共享模块。CMD 模块定义规范与 Node.js 的模块规范非常相近。通过 Sea.js 的 Node.js 版本,可以很方便实现模块的跨...

    前端开源库-grunt-cmd-package

    `grunt-cmd-package` 是一个专门为Seajs模块化开发设计的Grunt插件,它主要用于concat(合并)Seajs的模块文件。Grunt,作为JavaScript的任务运行器,提供了丰富的插件来处理诸如编译、压缩、测试等前端开发中的常见...

    sea.js的资料,还有node安装包

    2. **构建工具**:在 Node.js 环境下,可以利用 Gulp、Grunt 或 Webpack 等构建工具,结合 Sea.js 的构建插件(如 seajs-combo,seajs-env 等),进行自动化构建流程,包括模块合并、压缩、环境适配等。 3. **模块...

Global site tag (gtag.js) - Google Analytics