vue性能优化之异步组件和路由懒加载

今天来聊聊vue2的性能小优化之异步组件路由懒加载

一、组件优化

目前代码块中包含了两个子组件,它们在符合条件的情况下才会渲染,采用了最基础的方式进行导入。

页面刷新后会加载五个文件,在点击显示两个组件时,只会新增一个文件,加载的是element的字体文件,也就是说在页面初始化时就已经加载了组件文件。

现在我们把它改写成异步组件,再来做个对比:

当我们点击显示组件时,控制台会新增一个请求,这时才会从服务器请求需要显示的源文件,另外一个组件也是同样的原理。

这样做的目的是在首屏渲染时减少加载文件的数量,在需要用到一些组件时才会从服务器获取,而且不会重复请求,可以有效的减少白屏的时间。

二、路由懒加载

接着来看一下路由懒加载:

目前这种方式,项目到后期javascript的包会变得非常大,影响页面加载。

而懒加载简单来说就是延迟加载或按需加载,即在需要使用到路由的时候才进行加载,修改如下:

常用的路由懒加载一般有两种,vue异步组件和ES中的import,不过这样写还是不够太简便,我们可以写一个方法将路由组件一次导入。

需要注意的是pages文件下的组件将会一次性全部导入,可根据需求来选择方案,这里的route.name需要与组件名称一致,不然无法导入。最后将路由导出即可。

相关推荐
EnCi Zheng13 小时前
M5-markconv自定义CSS样式指南 [特殊字符]
前端·css·python
kyriewen13 小时前
你的网页慢,用户不说直接走——前端性能监控教你“读心术”
前端·性能优化·监控
广州华水科技13 小时前
北斗GNSS变形监测在大坝安全监测中的应用与优势分析
前端
前端老石人13 小时前
前端开发中的 URL 完全指南
开发语言·前端·javascript·css·html
CAE虚拟与现实13 小时前
五一假期闲来无事,来个前段、后端的说明吧
前端·后端·vtk·three.js·前后端
Sarvartha13 小时前
三目运算符
linux·服务器·前端
晓晨的博客14 小时前
ROS1录制的bag包转换为ROS2格式
前端·chrome
Wect14 小时前
LeetCode 72. 编辑距离:动态规划经典题解
前端·算法·typescript
donecoding14 小时前
别再让 pnpm 跟着 nvm 跑了!独立安装终极指南
前端·node.js·前端工程化
GISer_Jing14 小时前
AI全栈转型_TS后端学习路线
前端·人工智能·后端·学习