vue 路由懒加载详情

作者:Silent丿丶黑羽 时间:2024-04-28 09:31:25 

1、什么是路由懒加载

官方的解释:

  • 当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。

  • 如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

官方想表达的意思

  • 首先,我们知道路由中通常会定义很多不同的页面

  • 这个页面最后会被打包到哪里呢?一般情况下是会放在一个js文件中

  • 但是页面这么多,所有文件都放到一个js文件中,必然会造成这个页面会非常的大

  • 如果我们一次性从服务器中请求下来这个页面,可能需要花费一定的时间,甚至用户的电脑上会出现短暂空白的情况

  • 如何避免这种情况?使用路由懒加载即可

路由懒加载做了什么

路由懒加载的主要作用是将路由对应的组件打包成一个个js代码块
只要在这个路由被访问到的时候,才加载对应的组件 

2、路由懒加载的使用

在使用之前,我们先来看看原先代码是如何加载路由的


import Vue from "vue";
import VueRouter from "vue-router";
import Home from "@/views/Home";
import About from "@/views/About";
import User from "@/views/User";

Vue.use(VueRouter);

const routes = [
 {
   path: "/",
   name: "Home",
   component: Home,
 },
 {
   path: "/about",
   name: "About",
   component: About
 },
 {
   path: "/user/:userId",
   name: "User",
   component: User
 }
];

我们看到从一开始我们就导入了路由对应的组件,如果需要的导入的组件非常多,那么加载页面就会相对较慢,我们来看下这种方式打包出来的文件

vue 路由懒加载详情

我们看到这种方式打包出来的文件只有2个js文件,之后我们加载页面的时候,需要把这2个文件全部加载完,页面才会展示,如果代码量过多,那么页面响应就比较慢,给用户体验非常不好

接下来我们使用路由懒加载


import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

// 新增路由懒加载代码
const Home = () => import('../views/Home')
const About = () => import('../views/About')
const User = () => import('../views/User')

const routes = [
 {
   path: "/",
   name: "Home",
   component: Home,
 },
 {
   path: "/about",
   name: "About",
   component: About
 },
 {
   path: "/user/:userId",
   name: "User",
   component: User
 }
];

我们看到,在路由配置中什么都不需要改变,只需要像往常一样使即可,只是在这之前声明了一个变量,变量中使用箭头函数来导入对应的组件,使用起来非常简单。

使用路由懒加载的方式打包出来的文件结构如下:

vue 路由懒加载详情

我们可以看到比原来的方式多出了3个js文件,这是因为我们上面代码3个组件使用了路由懒加载,这3个js文件只有路由被访问到了才会去加载,能省下不少的加载时间

所以我们更推荐使用路由懒加载的方式去加载路由

来源:https://www.cnblogs.com/jiakecong/p/15026592.html

标签:vue,路由懒加载
0
投稿

猜你喜欢

  • Python如何把Spark数据写入ElasticSearch

    2021-06-28 20:07:46
  • asp.net生成Excel并导出下载五种实现方法

    2023-07-06 11:01:16
  • PHP中动态显示签名和ip原理

    2024-05-11 10:12:33
  • 在ADF中跟踪SQL执行时间实现代码

    2024-01-16 16:09:00
  • PyCharm 2020 激活到 2100 年的教程

    2021-01-19 12:30:43
  • Anaconda+VSCode配置tensorflow开发环境的教程详解

    2021-04-03 09:47:32
  • 详解Python模块化--模块(Modules)和包(Packages)

    2023-03-30 01:14:27
  • PHP版微信小店接口开发实例

    2023-11-10 11:56:06
  • MySQL的数据库数据备份和恢复详解

    2012-01-29 18:19:07
  • python标识符的用法及注意事项

    2023-05-02 03:03:04
  • 在python中实现求输出1-3+5-7+9-......101的和

    2022-10-08 16:33:14
  • asp 使用正则表达式替换word中的标签,转为纯文本

    2011-02-28 10:49:00
  • javascript 读取图片文件的大小

    2024-04-17 10:40:11
  • 解决Pycharm下面出现No R interpreter defined的问题

    2021-03-03 01:33:28
  • python正则表达式实现自动化编程

    2022-01-08 12:24:33
  • python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法

    2023-02-24 06:31:23
  • 彻底搞懂python 迭代器和生成器

    2021-09-14 05:00:26
  • Python基于mysql实现学生管理系统

    2024-01-24 05:57:47
  • Python接口自动化之cookie、session应用详解

    2023-02-02 11:10:35
  • sql中返回参数的值

    2024-01-29 11:29:00
  • asp之家 网络编程 m.aspxhome.com