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，首次加载如果引入所有路由，那么首屏的时间势必会比较耗时。采用路由懒加载，只有当访问到相应的路由时，才会加载对应路由，缩短首屏加载时间。 参考

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

=>

{ 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：

{
    "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缓存，不能及时更新，可以手动处理

配置文件如下:

{
    "src_dir": "/Users/ludis/Desktop/work/lt-educate/dist",
    "bucket": "lt",  
    "overwrite": true,
    "check_exists": true,
    "rescan_local": true
}

编译配置

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

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服务端渲染。

结语：

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