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.js 和 jquery.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 项目