tr;dr

利用 CDN 鏡像加載 Meteor App 的 css娃豹、js 文件

許多研究表明退客，用戶最滿意的網(wǎng)頁加載時(shí)間是在2秒以下骏融。能夠忍受的較長等待時(shí)間上限大概在6～8秒之間链嘀。如果需要等待12秒，99%以上的用戶會(huì)關(guān)閉網(wǎng)頁離開档玻。

所以如果要給用戶提供愉快的使用體驗(yàn)怀泊，盡量做到 2 秒內(nèi)打開你的網(wǎng)站。

問題

大家知道 Meteor App 打包之后前端的 css 和 js 文件就算壓縮了也有 500KB 左右误趴。這樣如果使用自己的 web 服務(wù)器來提供這些文件加載的話霹琼，一個(gè)問題就是很慢，另外還會(huì)消耗更多的云主機(jī)流量凉当，這可比 CDN 流量貴多了枣申，一般云主機(jī)流量是 CDN 流量的 3 到 5 倍的價(jià)格，甚至更貴纤怒，如果你的配置很高的話糯而。

簡單的計(jì)算

如果你的網(wǎng)絡(luò)服務(wù)器是最基本的一兆帶寬 1 Mb/s（注意 Mb 和 MB 的轉(zhuǎn)換），那么就算是一個(gè)人訪問也至少得等 4 秒才能看到你的首頁泊窘，兩個(gè)人就變?yōu)?8 秒（實(shí)際上更久）熄驼。人多了就是龜速。就算是 100 Mb 的大水管也頂不住幾百人的訪問烘豹，而這點(diǎn)訪問量一般也不值得用負(fù)載均衡這樣的技術(shù)瓜贾。值得一提的是主機(jī)大帶寬是非常貴的。

如果你的服務(wù)器是按照流量收費(fèi)携悯，那么大概 1元/GB 祭芦，具體取決于你的服務(wù)器提供商和區(qū)域。但是使用 CDN 一般在 0.3元/GB憔鬼，你可以節(jié)省 70% 的流量費(fèi)用龟劲。單個(gè)云主機(jī)的峰值流量也有限，肯定不如 CDN 的分布式節(jié)點(diǎn)轴或。

所以使用 CDN 在速度和經(jīng)濟(jì)上都有很大的優(yōu)勢昌跌。

解決方法

解決辦法很簡單，只需要使用外部 CDN 服務(wù)照雁，再加載一個(gè) Meteor 包蚕愤，部署時(shí)增加一行配置就行了。不用額外寫任何代碼饺蚊，也不用自己上傳文件萍诱。

CDN 服務(wù)

首先你必須得有 CDN 服務(wù)。這里以我用的七牛為例子污呼。七牛有每月免費(fèi) 10GB 的計(jì)劃裕坊，應(yīng)該能滿足很多小的應(yīng)用了，或者測試目的燕酷。你可以使用 Github 或者微信等方式登錄七牛碍庵。

mcdn

填寫好后，你會(huì)得到一個(gè)七牛生成的測試域名浴麻，類似 xxxxxx.bkt.clouddn.com得问。當(dāng)然你也可以使用自己綁定的域名。記下這個(gè)域名软免，稍后還會(huì)使用宫纬。

使用 Meteor-CDN 包

這個(gè)包的代碼和文檔在 https://github.com/nitrolabs/meteor-cdn/ 。它主要的作用就是把打包后的 css 和 js 文件的域變更到你指定的 CDN 地址膏萧。如果環(huán)境變量里沒有 CDN_URL 的設(shè)置漓骚，那么程序就不會(huì)有任何變化。

安裝

meteor add nitrolabs:cdn

運(yùn)行

一種方式是在運(yùn)行時(shí)指定 CDN_URL 的地址

export CDN_URL="http://xxxxxx.bkt.clouddn.com" && meteor

或者在你的 mupx 的配置里的 env 加上 CDN_URL

// mup.json
{
    // Normal mup settings
    // ...
    // Configure environment
    "env": {
        "PORT"       : 80,
        "CDN_URL"    : "http://xxxxxx.bkt.clouddn.com",
        "ROOT_URL"   : "http://www.mysite.com"
    }
}

通過以上兩種方式之一運(yùn)行后榛泛，你的網(wǎng)站就飛起來了蝌蹂。可以使用 Chrome 的開發(fā)者工具 network 頁面查看各個(gè)文件的加載時(shí)間曹锨。

結(jié)論

下圖是 jianbo.im 網(wǎng)站在不使用 cache 的情況下的加載情況孤个。Meteor 打包壓縮后的 419 KB meteor_js_resource 只需要 98 ms 加載，整個(gè)初始 markup 加載花了 682 ms沛简。

network

當(dāng)然還有很多方法可以提高網(wǎng)頁的加載速度齐鲤，但是這個(gè)方法簡單有效，可以滿足很多 Meteor App 的應(yīng)用場景椒楣，能使你的 Meteor App 在比較便宜的云主機(jī)網(wǎng)絡(luò)條件下處理更多的用戶訪問给郊。

另外附上鏡像 bucket 里到底存儲(chǔ)了什么，也就是什么文件被加速了撒顿。大家可以看到 js丑罪、css 還有一些字符等信息文件。robots.txt 是告訴搜索引擎是否收錄和處理鏡像沖突凤壁。有兩組 css吩屹、js 文件是因?yàn)槲?build 了兩次，每次產(chǎn)生的文件名不一樣拧抖。這樣也保證每次修改源碼后用戶訪問到更新的 css煤搜、js 文件。

bucket