首屏时间(First Contentful Paint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间.
一、加载慢的原因
在页面渲染的过程,导致加载速度慢的因素可能如下:
网络延时问题
资源文件体积是否过大
资源是否重复发送请求去加载了
加载脚本的时候,渲染内容堵塞了
二、解决方案
常见的几种SPA首屏优化方式:减小入口文件积、UI框架按需加载、图片资源的压缩、组件重复打包、开启GZip压缩
1.减小入口文件体积
常用的手段是路由懒加载,把不同路由对应的组件分割成不同的代码块,待路由被请求的时候会单独打包路由,使得入口文件变小,加载速度大大增加
在vue-router
配置路由的时候,采用动态加载路由的形式
routes:[path:'home',name:'home',component:()=>import('./components/home.vue')]
以函数的形式加载路由,这样就可以把各自的路由文件分别打包,只有在解析给定的路由时,才会加载路由组件
2.UI框架按需加载
在日常使用UI
框架,例如element-UI
、或者antd
,我们经常性直接饮用整个UI
库
importElementUIfrom'element-ui'Vue.use(ElementUI)
但实际上我用到的组件只有按钮,分页,表格,输入与警告 所以我们要按需引用
import{Button,Input,Pagination,Table,TableColumn,MessageBox}from'element-ui';Vue.use(Button)Vue.use(Input)Vue.use(Pagination)
3.组件重复打包
假设A.js
文件是一个常用的库,现在有多个路由使用了A.js
文件,这就造成了重复下载
解决方案:在webpack
的config
文件中,修改CommonsChunkPlugin
的配置
minChunks:3
minChunks
为3表示会把使用3次及以上的包抽离出来,放进公共依赖文件,避免了重复加载组件
4.图片资源的压缩
图片资源虽然不在编码过程中,但它却是对页面性能影响最大的因素
对于所有的图片资源,我们可以进行适当的压缩
对页面上使用到的icon
,可以使用在线字体图标,或者雪碧图,将众多小图标合并到同一张图上,用以减轻http
请求压力。
5.开启GZip压缩
拆完包之后,我们再用gzip
做一下压缩 安装compression-webpack-plugin
cnmpicompression-webpack-plugin-D
在vue.congig.js
中引入并修改webpack
配置
constCompressionPlugin=require('compression-webpack-plugin')configureWebpack:(config)=>{if(process.env.NODE_ENV==='production'){//为生产环境修改配置...config.mode='production'return{plugins:[newCompressionPlugin({test:/\.js$|\.html$|\.css/,//匹配文件名threshold:10240,//对超过10k的数据进行压缩deleteOriginalAssets:false//是否删除原文件})]}}
在服务器我们也要做相应的配置 如果发送请求的浏览器支持gzip
,就发送给它gzip
格式的文件 我的服务器是用express
框架搭建的 只要安装一下compression
就能使用
constcompression=require('compression')app.use(compression())//在其他中间件使用之前调用