轻松大幅度降低 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

时间: 2024-10-13 11:00:15

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

Vue SPA 首屏加载优化实践

写在前面 本文记录笔者在Vue SPA项目首屏加载优化过程中遇到的一些坑及优化方案! 我们以 vue-cli 工具为例,使用 vue-router 搭建SPA应用,UI框架选用 element-ui , ajax方案选用 axios, 并引入 vuex ,使用 vuex-router-sync 将 router 同步到 store ,服务器使用本地Nginx服务. 构建项目 vue-init webpack vue-spa-starter-kit cd vue-spa-starter-kit n

vue项目首屏加载优化实战

问题 单页面应用的一个问题就是首页加载东西过多,加载时间过长.特别在移动端,单页面应用的首屏加载优化更是绕不开的话题.下面我会写出我在项目中做的一些优化,希望大家能够相互讨论,共同进步. 我的项目vue-cli3构建的,vue+vue-router+vuex,UI框架选用 element-ui,ajax方案选用 axios,服务器使用Nginx.用到的这些技术都是现在用的比较广泛的,看到这篇文章,我估计你和我用的技术应该差不多. 第一步:webpack-bundle-analyzer 分析 首页

解决React首屏加载白屏的问题

众所周知,在项目中如果在资源加载请求还未完成的时候,由于阻塞机制,会出现首页白屏的问题,产生很差的用户体验.本文以react为例,提供一个解决方法. 解决原理:使用  onreadystatechange  去监听 readyState,在资源加载完成之前加载一个只有框架的静态页面,页面不请求数据.当数据请求完成之后再将路由切换到真实的首页. 废话不多说,上代码: main.js import React from 'react'import ReactDom from 'react-dom'i

APP的六种loading加载样式,全在这...

今天这篇文章是给大家分享的loading加载的设计,文章里面会有一些实例在这分享给大家! 大多数App都要与服务器进行数据的交换,App向服务器发出数据请求,服务器接收到请求之后向App传输相应数据,App接收成功后显示数据内容,没有接收成功则反馈数据接收失败.在这个数据交换过程中,由于网络原因,需要花费一定时间,也就是说用户要等待加载完成,这个时候就要用到loading加载机制,它告诉用户,App正在努力为您加载数据,您稍安勿躁.好的loading设计能减弱用户的等待焦虑,不合理的loadin

APP的六种loading加载样式

今天这篇文章是给大家分享的loading加载的设计,文章里面会有一些实例在这分享给大家! 大多数App都要与服务器进行数据的交换,App向服务器发出数据请求,服务器接收到请求之后向App传输相应数据,App接收成功后显示数据内容,没有接收成功则反馈数据接收失败.在这个数据交换过程中,由于网络原因,需要花费一定时间,也就是说用户要等待加载完成,这个时候就要用到loading加载机制,它告诉用户,App正在努力为您加载数据,您稍安勿躁.好的loading设计能减弱用户的等待焦虑,不合理的loadin

jQuery 超屏加载

jQuery 超屏加载,当文档超出屏幕的高度时,加载最新下个列数据 $(window).scroll(function () { var height = $(document).height(); //页面的高度 var keheight = $(window).height(); //浏览器可视的高度 var sheight = $(document).scrollTop(); //滚动的高度 var num = $('.pro_list a').length; if (height <=

滚屏加载--无刷新动态加载数据技术的应用

index.html <?php require_once('connect.php'); //连接数据库 $user = array('demo1','demo2','demo3','demo3','<de></de>mo4'); //模拟了几个用户 ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm

滚屏加载--jQuery+PHP实现浏览更多内容

滚屏加载技术,就是使用Javascript监视滚动条的位置,每次当滚动条到达浏览器窗口底部时,触发一个Ajax请求后台PHP程序,返回相应的数据,并将返回的数据追加到页面底部,从而实现了动态加载,其实就是一个典型的Ajax应用.本文将使用jQuery,结合PHP,mysql以及JSON,为您讲解如何应用滚屏加载技术到您的项目中去.当然,阅读本文的前提是您需要有jQuery和PHP相关基础. index.php 我们默认要显示15条数据,因此,我们先从数据库取开始的15条数据显示在页面.后面新加载

vue首屏减少加载时间(gzip)

最初,我以为单纯的以为通过按需引入相对应的组件和懒加载就可以有效的减少请求的时间 我to young啊,无论我怎么改,请求时间就是降不下来,后来,直到我遇到了本期的主角,gzip这个神奇的东西 原本我的请求体积是1M多(用了两个UI组件能不大吗(-_-)),用了懒加载和按需引入,虽然说降到600k 但是还是很大, 于是乎,在头疼的时候,我遇到了gzip OMG 体积变成了100多k!!!!!! 那么gzip是个什么东西呢 GZIP最早由Jean-loup Gailly和Mark Adler创建,