vue 首页加载,速度优化及解决首页白屏的问题
一 、Spa单页面的加载过程
1 、首先就是html,也就是FP阶段
页面在导航后首次呈现出不同于导航前内容的时间点,有一个东西回来渲染在页面上了
2 、然后是静态资源css ,js ,之后解析js ,生成HTML,也就是FCP阶段 ,css,js资源加载下来了 ,首次的内容绘制 ,有一个大结构了
比如app根目录里面有一个header,div
3 、最后,就是FMP,ajax请求数据之后,首次有效绘制,就是页面加载差不多了 ,但是可能图片还没加载出来
4 、总结
从FP到FMP这个过程全是白屏 ,可能你的header如果有啥大背景色啊 ,这个背景色或许会出来,ajax之后 ,才会真正去解析我们的数据,把数据放入我们的html标签中
二 、首页加载慢的原因
在vue项目中 ,引入到项目中的js,css都会被打包进入vendor.js,如果引入的第三方库众多 ,最后打包后的vendor.js就会体积庞大,浏览器再加载该文件后才会进入首屏 ,如果vendor.js体积过大 ,那么加载的时间就越久,白屏的时间就越长
三 、加载速度慢解决方案
1 、分离打包第三方资源包
在build文件夹下的webpack.base.conf.js中配置externals可以分离打包第三方资源包 ,key是依赖包的名称 ,value是源码抛出来的全局变量,这样打包后这些文件就不会打包到vendor.js 和app.js中 ,会大大减少打包体积 。(尤其是你的项目用了多个三方库)
这个做法就是可以不把这些资源打包到bundle和vendor.js中 ,而是在运行时去获取需要的依赖和资源 ,大大减少打包的体积 。
2 、第三方库使用CDN引入
在项目开发中 ,我们会用到很多第三方库 ,如果可以按需引入 ,我们可以只引入自己需要的组件 ,来减少所占空间 ,但也会有一些不能按需引入 ,我们可以采用CDN外部加载 ,在index.html中从CDN引入组件,去掉
其他页面的组件import ,修改webpack.base.config.js ,在externals中加入该组件,这是为了避免编译时找不到组件报错 。
3 、vue-router路由懒加载
这个是相当重要的一步,这步会大大减少打包后的体积 ,提升加载速度
在访问到相关页面才加载对应的路由和资源 ,才是正确的 ,否则全在初始化项目时加载 ,那么首屏时间就会很久 。
举例说明:
路由懒加载模式配置
非----懒加载模式配置 router.js配置
4 、静态资源压缩 ,代码压缩 ,图片压缩
(1) 、开启gzip压缩 ,(这个需要服务端配合)
gzip压缩一定要开 ,并且服务端配合开一下 ,真的很重要 。开启gzip后你会发现加载速度有质的提升 ,尤其是你的vendor.js和app.js体积过大的时候 。
(2)、图片压缩,目前我才用的是阿里云的图片处理(付费的)效果比较好 ,或者有条件的话配置一台单独的图片服务器
(3) 、尽量使用icon代替图片
(4) 、 js代码压缩- - - -(webpack 自UglifyJsPlugin插件压缩js文件)
(5)、css 代码压缩- - - - (采用optimize-css-assets-webpack-plugin插件来压缩css代码)
5 、不要滥用三方库
尽量一个项目只使用一个库 ,不要为了方便使用多个库而忽略了性能 。
6 、去掉编译中的map文件
为了避免部署打包体积过大,我们通常去掉源文件(就是打包后看不到源代码),打包后的体积会小很多 ,在config文件夹下的index.js文件中
7 、代码层面的优化
(1) 、项目组件化 ,去掉冗余的代码
(2) 、正式环境去掉console.log
(3) 、index.html页面中将js文件放到页面最底部 ,css文件放在<header>中使用link引入 。
这么做的原因是因为浏览器渲染的机制是自上而下的 ,如果把js文件放到头部渲染 ,等js文件渲染完成才开始绘制页面 ,这样速度会很慢 ,并且会受到css渲染的阻塞 ,所以要把js文件放到最底部 ,并且一些没有关联性的文件可以采用异步加载
四 、解决白屏 ,体验优化
上边已经讲述了优化问题 ,把所有的优化都做完之后 , 加载速度有了显著提升,把所有的优化都做完之后 ,加载速度有了显著提升}把所有的优化都做完之后 ,加载速度有了显著提升把所有的优化都做完之后,加载速度有了显著提升 ,但是再网慢的时候还是会有白屏 ,所以再白屏期间加骨架屏和loading就显得格外重要了 。
以上为个人经验 ,希望能给大家一个参考 ,也希望大家多多支持本站 。
创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!