Sea.js 手册与文档


目录


打包部署

我们用一个例子来说明。

开发阶段

这是一个简单的计算器: calculator demo
项目虽小,但为了可维护性和可扩展性,分成了以下文件:

index.html     -- 页面
style.css      -- 样式

init.js        -- 入口脚本
stdin.js       -- 处理输入
stdout.js      -- 处理输出
calculator.js  -- 控制器
math.js        -- 数学计算库

源码在这里: calculator@github

index.html 中仅需引入:

<script src="path/to/sea.js" data-main="path/to/init"></script>

所有依赖的脚本,SeaJS 会自动加载进来:

在开发阶段,这样做非常舒适。但显然,对大型应用来说,功能拆分得越细,模块也就越多。 如果直接上线,HTTP 链接数会过多,对网站性能很不利。

如何才能让开发时愉悦,同时上线后又不影响性能呢?

部署阶段

通过部署阶段的优化,我们可以保持开发时的愉悦,同时不影响上线后的网站性能。 回到简易计算器项目,看下具体如何做。

首先,按照说明,安装好 spm 工具: spm

然后编辑打包配置文件 build-config.js

  module.exports = {
    "loader_config": "./init.js",

    "base_path": "path/to/libs/",
    "app_url": "http://seajs.org/docs/demo/calculator/online"
  };

再进行如下操作:

 $ cd path/to/demo/calculator
 $ spm build init.js --combine
   Building init.js
   ... process init.js
   ... process stdin.js
   ... process calculator.js
   ... process stdout.js
   ... process math.js
   Combined to __build/init.js

运行 sbuild 后,我们获得了压缩和打包合并后的 __build/init.js 文件。 最后发布上线:

 $ 使用部署工具
 $ 发布 local/calculator/__build/*.js 到 online/calculator/*.js

这样,我们得到了线上版本: 线上演示

来看下 HTTP 链接数:

除了 sea.jsjquery.js,其他所有脚本都合并到了 init.js 文件中,这对页面性能很有裨益。

还可以用 --combine_all 选项将所有依赖的模块都合并到单个文件:

 $ cd path/to/demo/calculator
 $ spm build init.js --combine_all
   Building init.js
   ... process init.js
   ... process stdin.js
   ... process jquery.js
   ... process calculator.js
   ... process stdout.js
   ... process math.js
   Combined to __build/init.js

这样,__build/init.js 也会包含 jquery.js, 脚本的 HTTP 链接数就只剩下两个了。

注意,HTTP 链接数并不是越少越好,还得考虑缓存等因素。推荐根据实际需求,进行合理拆分和打包。

更多信息,请参考: spm 项目