vue 项目在低配机器上线及优化

背景

功能:最近帮朋友的忙,抽空用vue-cli3脚手架,开发一个网站,适配pc和mobile,两端分别有约10个页面,也就是十个路由,网站中的图片比较多,且使用了几个自定义字体,ttf文件都在2m左右。

服务器环境:本着能抠一点就抠一点的原则,购买的是阿里云ECS的入门配置,1核1G,40G硬盘,1M带宽,基本上是最低配了。(本来想用搬瓦工来着,但最近搬瓦工被封的厉害,风险比较大,可能买来用一两周就GG了。)

由于是空闲时间搞得,时间也比较急,前期没进过任何优化,直接编译完上线,发现首次全部加载完成耗时32s !分析发现原因如下:

  • 每页加载的图片都在1025张左右,所有的图片全部没有压缩,尺寸较大,尤其顶部banner达12M左右,其余大图在700800kb之间,每页的图片加起来在5M10M之间。
  • 引入的自定义平方字体,使用了regular,medium,thin等几种,每种ttf字体都在2M左右,加起来字体有7、8M。
  • 首屏加载所有路由,加载耗时。
  • 由于服务器是1M带宽,那么每秒下行的最高速度约在120k左右,加载以上超过10M的资源,最快理论速度也在10s以上,且由于不是固态硬盘,速度上也不快。

综合以上的问题,对存在的问题进行逐个优化:

1、路由懒加载:

对于多路由的SPA,首次加载如果引入所有路由,那么首屏的时间势必会比较耗时。采用路由懒加载,只有当访问到相应的路由时,才会加载对应路由,缩短首屏加载时间。 参考

1
2
import Home from './pages/pc/home.vue'
{ path: '/home', component: Hone, label: '首页'},

=>

1
{ path: '/home', component: () => import('./pages/pc/home.vue'), label: '首页'},

2、图片压缩优化:

所有图片使用 https://tinypng.com 进行压缩,可以压缩约80%左右的大小,同时图片显示效果基本不变。

3、字体压缩:

当引用自定义的字体后,往往字体文件达1~2M,严重拖累加载进度。
使用 font-spider 按需加载字体,可由2M缩减为3k,效果显著。

字体压缩步骤是:

  1. 先将vue编译
  2. 执行 font-spider index.html

如果将资源文件放置在非本地(如cdn),那么无法直接使用font-spider压缩远程资源。
此时可以使用 fsp 压缩远程资源。示例配置如fspconfig.js

1
2
3
4
5
6
7
{
"localPath" : "./static/fonts/",
"onlinePath" : "http://cdn.lantianren.net/static/fonts/",
"url" : [
"http://lantianren.net/index.html"
]
}

执行 fsp run 即可。

4、将本地的静态文件批量上传至七牛cdn

使用 qshell 工具即可。执行:qshell qupload /Users/ludis/Work/src/qshell/qupload.json

配置强制刷新,每次修改完文件后,可以强制刷新上传至七牛。同时网站存在cdn缓存,不能及时更新,可以手动处理

配置文件如下:

1
2
3
4
5
6
7
{
"src_dir": "/Users/ludis/Desktop/work/lt-educate/dist",
"bucket": "lt",
"overwrite": true,
"check_exists": true,
"rescan_local": true
}

编译配置

vue.config.json: 根据运行模式设置资源根路径。可以将静态资源上传至cdn(七牛)加速。

1
2
3
4
5
6
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? 'http://cdn.lantianren.net/'
: './',
assetsDir: 'static'
}

经过这些优化后,首屏加载时间在2s~2.5s之间浮动,由于是SPA应用,所以其他页面基本是秒开,且图片进压缩,cdn处理后,加载也很快。整体上从开始的32S降至2s开屏,基本上达到可接受范围。

👉 体验地址

其余优化方式:

1、如果资源放置在本地,可以配置nginx gzip压缩
2、如果项目更加庞大复杂,可以继续使用ssr服务端渲染。

结语:

平时在工作中开发小型项目,在公司较高的硬件配置下比较少有优化加载速度的需求和想法。当使用低配环境时,就会发现还是有很多可优化的点。

Author

Ludis

Posted on

2019-07-25

Updated on

2019-07-25

Licensed under

Comments