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

2019-07-25 17:58:45

背景

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

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

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

  • 每页加载的图片都在10~25张左右,所有的图片全部没有压缩,尺寸较大,尤其顶部banner达1~2M左右,其余大图在700~800kb之间,每页的图片加起来在5M~10M之间。
  • 引入的自定义平方字体,使用了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服务端渲染。

结语:

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

Flutter 实战进阶

Flutter 在实际开发中遇到的一些问题及解决方案,作为笔记记录。 1、container width、height 100% FractionallySizedBox( widthFactor: 1, heightFactor: 1, child: , ) double width = MediaQuery.of(context).size.width double height = MediaQuery.of(context).size.height 2、沉浸式背景图片 背景图片铺满Appbar及状态栏 Widget build(BuildContext context) { return new Stack( children: <Widget>[ Container( child: Image.network('https://www.bing.com/

H5在全屏Webview中双端适配刘海屏

背景: 最近遇到一个看似常规的H5需求,是App内嵌的一个功能模块,看样子跟往常一样重复造轮子就OK了,客户端开个Webview加载页面即可。 正常我们遇到最多的是下面这种类型: 这种的话一般是封装一个Webview包含返回+标题+分享功能,然后加载H5即可,返回即关闭Webview,标题是读取网页的Title属性,分享是调起客户端的分享弹窗。 然是这次的H5有点不寻常的东西: 导航栏除了返回键、title、右侧的操作菜单(进入另一个H5页),在title还有一个操作项❔,用于点击弹出说明框。 有一个穿透状态栏和导航栏的背景 大概长下面这样: 向上面的这种复杂页面一般是客户端做的,但是!!! 因为种种原因,最后商量用H5做。那看到这样的设计图,机智的攻城狮们一般会跟产品争论一番讨论说你这背景图做不了,只能到导航栏以下,并且你这个问号得移到其他地方bulabulabula。。。 然而作为一名专业的攻城狮,我们当然是奔着最佳的视觉感官+用户体验去的,遇到问题要克服之! 那么确定100%还原设计图后,首先想到的一个方法是和双端定义一系列协议,包括设置全屏背景图、在title后面加操作按钮(及隐藏方法,因为到其他页面就没了),在右侧加自定义的菜单,点击后可跳转其他页面。这个看着就很麻烦,涉及到一系列的交互想想就头疼,还不如直接原生写的痛快一点。和客户端你同学讨论后他们果然面露难色,在我说完第二秒就否决的这种做法,原因很简单: 1、