SPA单页面应用首屏加载速度提升方法

原创已于 2022-03-17 10:57:03 修改 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #vue.js #javascript

于 2022-03-10 16:06:57 首次发布

性能优化专栏收录该内容

1 篇文章

订阅专栏

SPA单页面应用首屏加载速度提升方法

首屏加载
计算首屏加载时间公式
解决方法

首屏加载

首屏加载：用户输入网址到首屏内容渲染完成时间。此时页面不一定要全部渲染完毕，但是用户第一眼看到的内容需要展示完全。

计算首屏加载时间公式

times = (performance.timing.domComplete - performance.timing.navigationStart) / 1000

解决方法

减少入口文件体积

通过路由懒加载，只有在解析路由的时候才加载组件

const routes = [
  {
    path: "Home",
    name: "Home",
    component: () => import('./components/home.vue')
  }
]

静态资源本地缓存

后端返回资源：采用HTTP缓存（强制缓存 + 协商缓存）
前端合理利用local storage
CDN静态资源缓存 vue vuex axios

UI框架按需加载

使用element、antd、uview之类的ui框架时用到什么组件就加载什么组件

避免组件重复打包

多个路由使用相同库时抽离成公共库
方案：在webpack的config文件中，修改CommonsChunkPlugin的配置民Chunks：2
minChunks就会把使用2次及以上的包抽离出来，放到公共依赖文件中，避免重复加载

todo:vue编译分片打包

图片资源压缩

对于页面上的icon，可以使用在线字体图标，或者雪碧图，将众多的小图标合并到一张图片上，减轻http请求压力

开启GZip压缩

拆完包后，用gzip做一下压缩，
安装 compression-webpack-plugin

在webpack中配置压缩

const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js','css']
// 配置compression-webpack-plugin压缩
new CompressionWebpackPlugin({
  algorithm: 'gzip',
  test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
  threshold: 10240,
  minRatio: 0.8
})