上线
本文讨论使用 Brix Core 开发的项目,在上线时需要主要的事项。
KISSY.config
上线时需要更新配置,取决于你的发布方式,主要是涉及到你项目的包名及相关设置:
- debug
- base
- tag
- ……等等
在 3.2.0 之前的版本中,这些配置是放在 brix/app 模块的 app.config 中的,但这层封装不是很有 必要,而且直接使用 KISSY.config 有时反而更方便,所以从 3.2.0 版本开始,关于实际项目的包配置, 都交还给 KISSY.config,只是在开发项目时,仍然可以使用这种方式:
KISSY.use('brix/base', function(S, app) {
app.config({
components: 'thx.demo'
// 默认的 base 值是 '.'
})
})
在项目上线时,推荐使用这种方式:
KISSY.config('packages', {
'thx.demo': {
debug: false,
tag: 20130827,
base: 'http://g.tbcdn.cn/mm/thx.demo/20130827'
}
})
下面针对 KISSY 包配置中这些属性作逐一解释:
debug
需要将 debug 状态设置为 false,在 KISSY 包配置中默认是 false,所以在开发状态时,为了保证 tpl.html 与 data.json 文件能够正确获取,可以这么配置:
KISSY.config('packages', {
'thx.demo': {
debug: true
}
})
这样影响 Brix Core 的行为,在如下操作时:
- 请求模板
- 请求数据
将 debug 设为 false,将是 Brix 不再用 XHR 请求相应文件,而是使用 KISSY.use 加载包装过的 KISSY 模块。即开发状态时请求 tpl.html,线上状态时 KISSY.use(‘tpl.tpl’),请求 tpl.tpl.js。 例如,假如 HTML 中如此使用:
<div bx-name="mosaics/dropdown" bx-tpl="./foo" bx-remote="./sample"></div>
当 debug 为 true,即开发状态时,将请求如下两个文件:
- mosaics/dropdown/foo.html 模板文件
- mosaics/dropdown/sample.json 数据文件
到了线上,debug 为 false,则请求如下两个文件:
- mosaics/dropdown/foo.tpl.js
- mosaics/dropdown/sample.js
注意模板文件的线上版本多了 tpl 后缀,这是为了避免模板文件名与数据文件名冲突。
base
如果不需要区分 debug 状态,直接用 app.config 也可以配置 base:
app.config({
components: 'thx.demo',
base: 'http://g.tbcdn.cn/mm/thx.demo/2013.8.27'
})
app.config 会拿这两条配置项自动配置 KISSY 包,使用的 debug 值为 false。
如此配置,所有 thx.demo/:name/:module 模块的请求地址将变为:
http://g.tbcdn.cn/mm/thx.demo/2013.8.27/thx.demo/:name/:module.js
当然,推荐的配置方式仍然是直接使用 KISSY.config:
KISSY.config('packages', {
'thx.demo': {
base: 'http://g.tbcdn.cn/mm/thx.demo/2013.8.27'
}
})
tag
在 KISSY 的包配置中还有个选项叫做 tag,即时间戳,此配置项用于更新 URL 的时间戳, 告诉 CDN 节点内容有更新,要到中心服务器回源。例如:
KISSY.config('packages', {
'thx.demo': {
base: 'http://g.tbcdn.cn/mm/thx.demo/2013.8.27',
tag: '20130827'
}
})
假如需要请求 thx.demo/foo 组件,则将发起的请求地址为:
http://g.tbcdn.cn/mm/thx.demo/2013.8.27/thx.demo/foo/index-min.js?t=20130827
combine
对 YSlow 当年定下的规则敏感的同学,可能会想把这些个组件的请求都合并掉,依靠 CDN 的 combo 服务, 和 KISSY 内建的模块合并支持,我们可以很方便地作此优化。
// 开启合并
KISSY.config('combine', true)
// 有前一条就够了。
// 不过,如果项目组件不妨便合并,我们可以另外关掉:
KISSY.config('packages', {
'thx.demo': {
base: 'http://somecdnthatdoesnotsupportcombo.cn',
combine: false
}
})
app.bootStyle
如果用到了 app.bootStyle ,而且需要加载项目自身组件包中的样式,则可以通过 components 配置声明需要加载样式的组件:
app.config({
base: 'http://g.tbcdn.cn/mm/thx.demo/2013.8.27',
components: {
'thx.demo': [ ... ] // 有 index.css 的组件
},
imports: {
mosaics: { ... },
mux.tanx: { ... }
}
})
更多 app.bootStyle 信息。