轻松大幅度降低 Meteor App 的首屏加载时间

转： http://www.jianshu.com/p/98388e50ab0a

 

许多研究表明，用户最满意的网页加载时间是在2秒以下。能够忍受的较长等待时间上限大概在6～8秒之间。如果需要等待12秒，99%以上的用户会关闭网页离开。

所以如果要给用户提供愉快的使用体验，尽量做到 2 秒内打开你的网站。

问题

大家知道 Meteor App 打包之后前端的 css 和 js 文件就算压缩了也有 500KB 左右。这样如果使用自己的 web 服务器来提供这些文件加载的话，一个问题就是很慢，另外还会消耗更多的云主机流量，这可比 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。具体就是 添加资源 -> 对象存储。创建好资源之后，选择镜像存储。然后在镜像源里填写你的网站地址。例如

填写好后，你会得到一个七牛生成的测试域名，类似 xxxxxx.bkt.clouddn.com。当然你也可以使用自己绑定的域名。记下这个域名，稍后还会使用。

使用 Meteor-CDN 包

这个包的代码和文档在 https://github.com/nitrolabs/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。

当然还有很多方法可以提高网页的加载速度，但是这个方法简单有效，可以满足很多 Meteor App 的应用场景，能使你的 Meteor App 在比较便宜的云主机网络条件下处理更多的用户访问。

另外附上镜像 bucket 里到底存储了什么，也就是什么文件被加速了。大家可以看到 js、css 还有一些字符等信息文件。robots.txt 是告诉搜索引擎是否收录和处理镜像冲突。有两组 css、js 文件是因为我 build 了两次，每次产生的文件名不一样。这样也保证每次修改源码后用户访问到更新的 css、js 文件。