vue首屏加载速度慢_Vue首屏加载速度优化如何提升80%?本文详解
在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏的体验。可以看个例子:
差点忘记介绍了:我是一名08年出道的高级前端老鸟,大家如果想跟我交流学习经验,可以进我的扣扣裙 519293536 有问题我都会尽力帮大家。主要是中高级问题,小白勿进哦
这是优化前的页面加载状态:执行npm run build打包项目,出来的vendeor.js文件,基本都是1M以上的的巨大文件,没有用户能忍受5s以上的loading而不关闭页面的,如图所示:
当项目在挂载到服务器上,平均都是10S以上加载出来,好家伙这加载时间,仿佛过了半个世纪,很烦人,心态boom, 开发者甚至都有种想砸电脑的冲动(·#*@#¥……&*)!
我们先来分析下前端加载速度慢原因
1. 首先安装webpack的可视化资源分析工具,命令行执行:
npm i webpack-bundle-analyzer -D复制代码
2. 然后在webpack的dev开发模式配置中,引入插件,代码如下:
const BundleAnalyzerPlugin = require('webpack-bundle-plugin').BundleAnalyzerPlugin
plugins: [
new BundleAnalyzerPlugin()
]复制代码
3. 最后命令行执行npm run build --report , 浏览器会自动打开分析结果,如下所示:
可以看到vue全家桶相关依赖占用了很大的空间,对webpack的构建速度和网站加载速度都会有比较大的影响。单页应用会随着项目越大,导致首屏加载速度很慢,针对目前所暴露出来的问题,有以下几种优化方案可以参考:
有针对性的优化方案
一、对于第三方js库的优化,分离打包
生产环境是内网的话,就把资源放内网,通过静态文件引入,会比node_modules和外网CDN的打包加载快很多。如果有外网的话,可以通过CDN方式引入,因为不用占用访问外网的带宽,不仅可以为您节省流量,还能通过CDN加速,获得更快的访问速度。但是要注意下,如果你引用的CDN 资源存在于第三方服务器,在安全性上并不完全可控。
目前采用引入依赖包生产环境的js文件方式加载,直接通过window可以访问暴露出的全局变量,不必通过import引入,Vue.use去注册
在webpack的dev开发配置文件中, 加入如下参数,可以分离打包第三方资源包,key为依赖包名称,value是源码抛出来的全局变量。如下图所示,可以看到打包后vue相关资源包已经排除在外了。对于一些其他的工具库,尽量采用按需引入的方式。
externals: {
vue: 'Vue',
vuex: 'Vuex',
'vue-router': 'VueRouter',
axios: 'axios',
'element-ui': 'ELEMENT'
}
二、vue-router使用懒加载
在访问到当前页面才会加载相关的资源,异步方式分模块加载文件,默认的文件名是随机的id。如果在output中配置了chunkFilename,可以在component中添加WebpackChunkName,是为了方便调试,在页面加载时候,会显示加载的对应文件名+hash值,如下图:
{
path: '/Login',
name: 'Login',
component: () = >import( /* webpackChunkName: "Login" */ '@/view/Login')
}复制代码
三、图片资源的压缩,icon资源使用雪碧图
严格说来这一步不算在编码技术范围内,但是却对页面的加载速度影响很大。对于所有的图片文件,都可以在一个叫tinypng的网站上去压缩一下。网址:tinypng.com/,对页面上使用到的icon,可以使用在线字体图标,或者雪碧图,将众多小图标合并到同一张图上,用以减轻http请求压力。然后通过操作CSS的background属性,控制背景的位置以及大小,来展示需要的部分。
四、开启gizp压缩
gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩,可以减小60%以上的体积。前端配置gzip压缩,并且服务端使用nginx开启gzip,用来减小网络传输的流量大小。
命令行执行:npm i compression-webpack-plugin -D
在webpack的dev开发配置文件中加入如下代码:
const CompressionWebpackPlugin = require('compression-webpack-plugin')
plugins: [
new CompressionWebpackPlugin()
]复制代码
启用gzip压缩打包之后,会变成下面这样,自动生成gz包。目前大部分主流浏览器客户端都是支持gzip的,就算小部分非主流浏览器不支持也不用担心,不支持gzip格式文件的会默认访问源文件的,所以不要配置清除源文件。
配置好之后,打开浏览器访问线上,F12查看控制台,如果该文件资源的响应头里显示有Content-Encoding: gzip,表示浏览器支持并且启用了Gzip压缩的资源
五、webpack相关配置优化
(1)使用uglifyjs-webpack-plugin插件代替webpack自带UglifyJsPlugin插件来压缩JS文件;生产环境关闭源码映射,一方面能减少代码包的大小,另一方面也有利于系统代码安全;清除打印日志和debugger信息;配置SplitChunks 抽取公有代码,提升你的应用的性能
(2)使用mini-xss-extract-plugin提取CSS 到单独的文件, 并使用optimize-css-assets-webpack-plugin来压缩CSS文件 。
注:具体相关webpack配置请点击juejin.im/post/5d2070…查看第一篇webpack文章,注释很详细哟。
六、前端页面代码层面的优化
(1)合理使用v-if和v-show
(2)合理使用watch和computed
(3)使用v-for必须添加key, 最好为唯一id, 避免使用index, 且在同一个标签上,v-for不要和v-if同时使用
(4)定时器的销毁。可以在beforeDestroy()生命周期内执行销毁事件;也可以使用$once这个事件侦听器,在定义定时器事件的位置来清除定时器。详细见vue官网
最终优化后的效果如下图:vendor.js文件从1M以上优化到256K左右,体积减少接近80%,排除服务器影响的因素,界面渲染速度基本都在1s左右,达到秒开效果,比之前快
了太多,体验一下就上来了嘻嘻。
结语:前端性能优化至关重要,以后有遇到更好的其他方案会继续补充进来。你也可以跟我探讨,我是一名高级前端老鸟,大家如果想跟我交流学习经验,可以进我的扣扣裙 519293536 有问题我都会尽力帮大家。主要是中高级问题,小白勿进哦
本文的文字及图片来源于网络加上自己的想法,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理
vue首屏加载速度慢_Vue首屏加载速度优化如何提升80%?本文详解相关推荐
- vue 关闭 窗口后清除所有数据_Vue首屏加载速度优化,我用这几个技巧提升80%以上...
前端潮咖 点击上面蓝字,关注我们! 关注 关注前端潮咖,每日精选好文 作者:谁动了我的橘子 来源:https://juejin.im/post/5edf5b22e51d4578975a7024 在Vu ...
- Vue首屏加载速度优化,提升80%以上
在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏.若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏 ...
- vue实现单选做题根据对错标色,作对跳转下一题,实现思路详解
vue实现单选做题效果详解 最近在做一个答题项目,废了好多时间,经过折腾和在大佬的指导下,终于清晰的了解逻辑,如果你也遇到此类问题,不妨先看看我的思路,看完点个赞,那是继续跟新的动力 此案例是使用sw ...
- nuxt解决首屏加载慢问题_Vue首屏加载慢
项目慢慢大起来之后,页面越来越多你会发现第一次进入vue项目变得很慢,这就叫首屏加载慢. 一般有这些常见原因: 有些项目图片很大也没有压缩 一般大图控制在300k以内 小图可以控制到50k以内 可以让 ...
- vue 加载时掉用mounted_Vue实例中生命周期created和mounted的区别详解
前言 本文主要跟大家介绍了关于Vue实例中生命周期created和mounted区别的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 生命周期先上图 什么是生命周期 Vue ...
- 怎么点亮段码屏_iPad屏幕坏点亮点怎么看 自查iPad屏幕坏点亮点方法【详解】
iPad屏幕坏点亮点怎么看,自查iPad屏幕坏点亮点 .iPad屏幕配备的是9.7寸大尺寸液晶屏,尤其是现在iPad4屏幕分辨率更是高达 2048 x1536像素.这样高的分辨率,坏点亮点出现的概率自 ...
- vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解
做后端管理系统,永远是最蛋疼.最复杂也最欠揍的事情,也永远是前端开发人员最苦逼.最无奈也最尿性的时刻.蛋疼的是需求变幻无穷,如同二师兄的三十六般变化:复杂的是开发难度寸步难行,如同蜀道难,难于上青天: ...
- 【vue+a-form+字体图标展示】在form表单中加入svg字体图标列表,新增操作详解
先准备svg字体图标 在assets目录下新建icons文件夹,新建svg文件夹,把svg格式的图标都存放在这里 在utils目录下新建icons.js文件 import eventAccident ...
- IM推送保障及网络优化详解(二):如何做长连接加推送组合方案
对于移动APP来说,IM功能正变得越来越重要,它能够创建起人与人之间的连接.社交类产品中,用户与用户之间的沟通可以产生出更好的用户粘性. 在复杂的 Android 生态环境下,多种因素都会造成消息推送 ...
最新文章
- LabVIEW图像灰度分析与变换(基础篇—4)
- 自媒体敏感词大全_让新媒体小编头疼的敏感词与错别字
- fedora常见问题和解决方案
- VT-x,VT-d简介
- ASP:关于生成HTML文件的新闻系统
- xgboost使用自定义的loss function
- fork/join和线程池_从fork-join /线程池调用的Singelton bean中的访问spring请求范围缓存...
- Android 系统(163)---Gallery为何有的图片在详细信息里查看其分辨率与实际不一样?
- 【转】RegSetValueEx运行时失败,返回代码为5,解决方法
- android tv webview,Android TV开发---WebView焦点处理
- 大雁塔尺寸_西安容易被误解的两座建筑 不是只有大小之分 游客来了才知道原因...
- orcale库表增加一个字段,自动设置为系统默认时间
- Ubuntu安装GIMP
- 大家都见过哪些让你虎躯一震的代码?
- 315来了,跨境卖家们赶紧自检容易被维权举报的问题
- APS高级排程在钣金冲压行业的应用
- 【SAP Abap】SAP S/4 ABAP OPEN SQL中WITH的应用案例
- matlab中累减怎么算,matlab中要怎么在自变量满足一定条件下画出函数图形
- 回溯法 backtrack
- VS2017 如何连接mysql数据库依赖的驱动msi