輕鬆大幅度降低 Meteor App 的首屏載入時間

標籤：

許多研究表明，使用者最滿意的網頁載入時間是在2秒以下。能夠忍受的較長等待時間上限大概在6～8秒之間。如果需要等待12秒，99%以上的使用者會關閉網頁離開。

所以如果要給使用者提供愉快的使用體驗，盡量做到 2 秒內開啟你的網站。

問題

大家知道 Meteor App 打包之後前端的 css 和 js 檔案就算壓縮了也有 500KB 左右。這樣如果使用自己的 網頁伺服器來提供這些檔案載入的話，一個問題就是很慢，另外還會消耗更多的雲主機流量，這可比 CDN 流量貴多了，一般雲主機流量是 CDN 流量的 3 到 5 倍的價格，甚至更貴，如果你的配置很高的話。

簡單的計算

如果你的網路伺服器是最基本的一兆頻寬 1 Mb/s（注意 Mb 和 MB 的轉換），那麼就算是一個人訪問也至少得等 4 秒才能看到你的首頁，兩個人就變為 8 秒（實際上更久）。人多了就是龜速。就算是 100 Mb 的大水管也頂不住幾百人的訪問，而這點訪問量一般也不值得用負載平衡這樣的技術。值得一提的是主機大頻寬是非常貴的。

如果你的伺服器是按照流量收費，那麼大概 1元/GB ，具體取決於你的伺服器供應商和地區。但是使用 CDN 一般在 0.3元/GB，你可以節省 70% 的流量費用。單個雲主機的峰值流量也有限，肯定不如 CDN 的分布式節點。

所以使用 CDN 在速度和經濟上都有很大的優勢。

 解決方案

解決辦法很簡單，只需要使用外部 CDN 服務，再載入一個 Meteor 包，部署時增加一行配置就行了。不用額外寫任何代碼，也不用自己上傳檔案。

CDN 服務

首先你必須得有 CDN 服務。這裡以我用的七牛為例子。七牛有每月免費 10GB 的計劃，應該能滿足很多小的應用了，或者測試目的。你可以使用 Github 或者等方式登入七牛。

首先需要建立一個新的資源，類似亞馬遜 S3 的 bucket。具體就是 添加資源 -> Object Storage Service。建立好資源之後，選擇鏡像儲存。然後在鏡像源裡填寫你的網站地址。例如

mcdn

填寫好後，你會得到一個七牛產生的測試網域名稱，類似 xxxxxx.bkt.clouddn.com。當然你也可以使用自己綁定的網域名稱。記下這個網域名稱，稍後還會使用。

使用 Meteor-CDN 包

這個包的代碼和文檔在 https://github.com/zxh930508/meteor-cdn 。它主要的作用就是把打包後的 css 和 js 檔案的域變更到你指定的 CDN 地址。如果環境變數裡沒有 CDN_URL 的設定，那麼程式就不會有任何變化。

安裝

meteor add nitrolabs:cdn

運行

一種方式是在運行時指定 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"    }}

 

通過以上兩種方式之一運行後，你的網站就飛起來了。可以使用 Chrome 的開發人員工具 network 頁面查看各個檔案的載入時間。

結論

是 jianbo.im 網站在不使用 cache 的情況下的載入情況。Meteor 打包壓縮後的 419 KB meteor_js_resource 只需要 98 ms 載入，整個初始 markup 載入花了 682 ms。

network

當然還有很多方法可以提高網頁的載入速度，但是這個方法簡單有效，可以滿足很多 Meteor App 的應用情境，能使你的 Meteor App 在比較便宜的雲主機網路條件下處理更多的使用者訪問。

另外附上鏡像 bucket 裡到底儲存了什麼，也就是什麼檔案被加速了。大家可以看到 js、css 還有一些字元等資訊檔。robots.txt 是告訴搜尋引擎是否收錄和處理鏡像衝突。有兩組 css、js 檔案是因為我 build 了兩次，每次產生的檔案名稱不一樣。這樣也保證每次修改源碼後使用者訪問到更新的 css、js 檔案。

bucket

 

原文連結：http://www.jianshu.com/p/98388e50ab0a  

輕鬆大幅度降低 Meteor App 的首屏載入時間