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

转: 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 服务。这里以我用的七牛为例子。七牛有每月免费 10GB 的计划,应该能满足很多小的应用了,或者测试目的。你可以使用 Github 或者微信等方式登录七牛。

首先需要创建一个新的资源,类似亚马逊 S3 的 bucket。具体就是 添加资源 -> 对象存储。创建好资源之后,选择镜像存储。然后在镜像源里填写你的网站地址。例如

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

一种方式是在运行时指定 CDN_URL 的地址

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

通过以上两种方式之一运行后,你的网站就飞起来了。可以使用 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 文件。

原文链接:https://www.cnblogs.com/welhzh/p/6513670.html

原创文章,作者:优速盾-小U,如若转载,请注明出处:https://www.cdnb.net/bbs/archives/5629

(0)
上一篇 2022年9月5日
下一篇 2022年9月5日

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

优速盾注册领取大礼包www.cdnb.net
/sitemap.xml