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

许多研究表明，用户最满意的网页加载时间是在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。具体就是添加资源 -> 对象存储。创建好资源之后，选择镜像存储。然后在镜像源里填写你的网站地址。例如

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