vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue 路由懒加载

vue 路由懒加载详情

作者:Silent丿丶黑羽

这篇文章主要介绍了vue 路由懒加载,当打包构建应用时,JavaScript 包会变得非常大,影响页面加载,这便是vue 路由懒加载,接下来随小编一起进入文章了解更多详细内容吧

1、什么是路由懒加载

官方的解释:

官方想表达的意思

路由懒加载做了什么

路由懒加载的主要作用是将路由对应的组件打包成一个个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
  }
];

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

我们看到这种方式打包出来的文件只有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
  }
];

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

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

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

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

到此这篇关于vue 路由懒加载详情的文章就介绍到这了,更多相关vue 路由懒加载 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文