什么是路由懒加载

官方的解释:

  • 当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。
  • 如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

官方想表达的意思

  • 首先,我们知道路由中通常会定义很多不同的页面
  • 这个页面最后会被打包到哪里呢?一般情况下是会放在一个js文件中
  • 但是页面这么多,所有文件都放到一个js文件中,必然会造成这个页面会非常的大
  • 如果我们一次性从服务器中请求下来这个页面,可能需要花费一定的时间,甚至用户的电脑上会出现短暂空白的情况
  • 如何避免这种情况?使用路由懒加载即可

路由懒加载做了什么

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

路由懒加载的使用

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

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(18)路由懒加载的更多相关文章

  1. Vue 路由懒加载, VueRouter一步完成Vue的路由懒加载 一行代码搞定懒加载

    Vue Router路由配置中的component里面配置即可 1 // 路由懒加载的方式加载组件 2 3 component: () => import('@/views/Detail'), ...

  2. vue的路由懒加载

    路由懒加载官方介绍 非懒加载写法: import Login from '@/components/Login' 所有路由涉及到的文件会被打包到 app.xxx.js 中 懒加载写法: const L ...

  3. vue中路由懒加载实现amd加载文件

    一般我们配置路由的时候是import引入: import log from '@/components/login': { path: '/login', component: log , hidde ...

  4. vue-router路由懒加载(解决vue项目首次加载慢)

    懒加载:----------------------------------------------------? 也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载? 像vue这种单 ...

  5. 【巷子】---vue路由懒加载---【vue】

    一.懒加载 也叫延迟加载或者按需加载,即在需要的时候进行加载,   二.为什么要使用懒加载 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要 ...

  6. vue项目性能优化(路由懒加载、gzip加速、cdn加速)

    前端工程性能优化一说意义深远悠长,本章主要介绍除了一些基础优化外如何实行路由懒加载.Gzip加速.CDN加速,让网页飞的快一些. 基础优化 老生常谈的一些: 不要在模板中写复杂的表达式 慎用watch ...

  7. vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

  8. vue路由懒加载及组件懒加载

    一.为什么要使用路由懒加载 为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 二.定义 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 三.使用 常用的懒加载方式 ...

  9. vue进阶:vue-router之导航守卫、路由元信息、路由懒加载

    1.导航被触发 2.在失活的组件里调用离开守卫:beforeRouteLeave —— 组件内守卫(离开组件). 3.调用全局的beforeEach守卫 —— 全局守卫(进入组件). 4.在重用组件里 ...

随机推荐

  1. nignx反向代理web服务器的配置与使用

    一.为什么要用nignx反向代理 1.负载均衡 当一台服务器的单位时间内的访问量越大时,服务器压力就越大,大到超过自身承受能力时,服务器就会崩溃.为了避免服务器崩溃,让用户有更好的体验,我们通过负载均 ...

  2. GO语言面向对象01---封装属性与创建对象的方法与工厂模式

    package main import "fmt" /* 面向过程编程:调度大量的变量.函数 ---------- 面向对象编程(OOP=Object Oriented Progr ...

  3. GPU特征处理技术

    GPU特征处理技术 GPU和CPU有何不同? 现代片上系统(SoC)通常集成中央处理器(CPU)和图形处理器(GPU).设计不同,这可能更取决于处理的数据集的类型. CPU经过优化,可以一次对几块数据 ...

  4. FinFET与2nm晶圆工艺壁垒

    FinFET与2nm晶圆工艺壁垒 谈到半导体工艺尺寸的时候,通常对于下面的一串数字耳熟能详:3um.2um.1.5um.1um.0.8um.0.5um.0.35um.0.25um.0.18um.0.1 ...

  5. C++ 扩展 Op

    C++ 扩展 Op 本文将介绍如何使用 C++ 扩展 Op,与用 Python 扩展 Op 相比,使用 C++ 扩展 Op,更加灵活.可配置的选项更多,且支持使用 GPU 作为计算设备.一般可使用 P ...

  6. python_request 使用jsonpath取值结果,进行接口关联

    一.jsonpath的安装 pip   install  jsonpath 二.使用举例 import jsonpath d1={"token":"hjshdsjhdsj ...

  7. 【SQLite】知识点概述

    1.SQLite不与诸如MySQL,Oracle,PostgreSQL或SQL Server之类的客户端/服务器SQL数据库引擎竞争,SQLite与fopen()竞争,读写快35%.2.SQLite数 ...

  8. 【Java】Debug断点调试常用技巧

    Debug操作技巧 Show Execution Point 将光标回到当前断点停顿的地方 Step Over 执行当前行代码,并将运行进度跳转到下一行. Step Into 进入到当前代码行的方法内 ...

  9. 代码生成器:IDEA 强大的 Live Templates

    前言 Java 开发过程经常需要编写有固定格式的代码,例如说声明一个私有变量,logger或者bean等等.对于这种小范围的代码生成,我们可以利用 IDEA 提供的 Live Templates功能. ...

  10. 「模拟8.17」star way to heaven(并查集,最小生成树)

    80分打法 首先二分最后答案,答案即为r,可看作以每个k为圆心r为半径的圆 我们进行并查集维护,维护相交的圆的边界 最后判断是否存在圆将上下边界覆盖,如有证明不行 1 #include<iost ...