首屏加载

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

计算首屏加载时间公式

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
})

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

浅谈Vue单页应用首屏加载速度优化方案
心语:最不会利用时间的人,最会抱怨时间不够趁着五一放假,刚好最近天气也是不好,.所以抽出一点时间写一点东西,也算是不辜负这个美好的假期吧!小编也祝愿大家五一快乐,玩得愉快哈随着各大前端框架的诞生以 ...
单页应用首屏加载速度慢怎么解决？
1.什么是首屏加载时间? 首屏加载时间是指浏览器从相应用户输入网址到首屏内容渲染完成的时间,从用户的角度来说就是:"地址栏输入网址之后网页呈现的速度".整个网站并不需要全部加载完成 ...
VUE单页应用首屏加载速度优化方案
单页应用会随着项目越大,导致首屏加载速度很慢!!!以下给出在下知道的几种优化方案使用CDN资源,减小服务器带宽压力路由懒加载将一些静态js css放到其他地方(如OSS),减小服务器压力按需加 ...
SPA(单页应用)首屏加载慢的优化方案
一. 什么是首屏加载时间? 首屏加载时间是指浏览器从相应用户输入网址到首屏内容渲染完成的时间. 整个网站并不需要全部加载完成,但需要展示当前可视窗口中的内容,也就是首屏. 从用户的角度来说就是:&qu ...
vue单页应用首屏加载速度慢如何解决
首屏时间(First Contentful Paint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间. 一.加载慢的原因在页面渲染的过程,导致加载速度慢的因素可能如下: 网络延时问 ...
单页应用的优缺点，单页应用首屏加载优化、小程序首次启动速度优化
单页应用的优缺点单页应用,简称(Single Page Application)是指整个应用只一个HTML页面,所有的功能和交互都在这个页面完成,利用JavaScript动态改变HTML内容. 优点 ...
[vue] SPA首屏加载速度慢的怎么解决？
[vue] SPA首屏加载速度慢的怎么解决? 1.通过Gzip压缩 2.使用路由懒加载 3.利用webpack中的externals这个属性把打包后不需要打包的库文件都分离出去,减小项目打包后的大小 ...
vue首屏加载速度慢_Vue首屏加载速度优化如何提升80%？本文详解
在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏.若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏 ...
Vue首屏加载速度优化，提升80%以上
在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏.若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏 ...

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