「Vue.js」Vue-Router + Webpack 路由懒加载实现

一.前言

当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。结合 Vue 的异步组件Webpack 的代码分割功能,轻松实现路由组件的懒加载.

  1. Vue 的异步组件
  2. webpack代码分割

建议首先熟读这两个知识点,会更容易理解懒加载的原理。本文的源码地址在-->lazyLoad,如果对你有帮助,欢迎star(・ε・●)

二.实战

话不多说,我们来一步步实践一下路由懒加载的过程
1.创建一个文件夹,目录结构大致如下
图片描述

2.创建两个简单的组件,作为切换组件时展示,代码很简单

<template>
    <div>
        <h4>This is About Page</h4>
    </div>
</template>
<script>
export default {
    name:  'about'
}
</script>

3.重点是route的配置,没有用到路由懒加载时,我们一般是这样配置的:

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/home',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

路由懒加载中我们要用到异步组件,所以改为这样配置:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

function loadView(view) {
  return () => import(/* webpackChunkName: "view-[request]" */ `@/views/${view}.vue`)
}

export default new Router({
  routes: [
    {
      path: '/home',
      name: 'home',
      component: loadView('Home')
    },
    {
      path: '/about',
      name: 'about',
      component: loadView('About')
    }
  ]
})

除了上面用到的import()引入组件,我们还可以使用webpack特有的require.ensure()

const Baz = r => require.ensure([], ()=>r(require('./Baz.vue')), '/baz')

将其他的文件配置完成后,我们就可以在浏览器中看到懒加载的效果了,即只有当路由匹配成功时,才会加载相应的组件,而且加载一次后会将它缓存,下次再访问这个路由,不会重新加载。
图片描述

三、结语

感谢你阅读我的文章,如对你有帮助,欢迎点赞收藏。如有错误,欢迎指正。最后,十分建议大家跟着实现一遍,源码地址在lazyLoad


Jchermy的前端之路
分享在前端方面的一些技术、感悟和思考等

Keep learning

851 声望
132 粉丝
0 条评论
推荐阅读
Vue微信公众号开发踩坑记录
JS-SDK需要向服务端获取签名,且获取签名中需要的参数包括所在页面的url,但由于单页应用的路由特殊,其中涉及到iOS和android微信客户端浏览器内核的差异性导致的兼容问题

imwty132阅读 67.6k评论 81

Vue中的diff算法
diff算法是一种通过同层的树节点进行比较的高效算法,避免了对树进行逐层搜索遍历,所以时间复杂度只有 O(n)。diff算法的在很多场景下都有应用,例如在 vue 虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较更新时...

款冬27阅读 14.1k评论 7

【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5k评论 10

封面图
vue-property-decorator使用手册
@Component 装饰器可以接收一个对象作为参数,可以在对象中声明 components ,filters,directives等未提供装饰器的选项,也可以声明computed,watch等

似曾相识17阅读 29.6k评论 7

前端开发工具
前端教程阿西河前端教程丨一个助你成为全栈开发的网站前端高手进阶JavaScript利用js实现表单的校验KeyCode 查询表现代 JavaScript 教程时间戳(Unix timestamp)转换工具HTML minifierJavaScript代码压缩-js代码压...

寒青14阅读 2.6k

万字长文~vue+express+mysql带你彻底搞懂项目中的权限控制(附所有源码)
所谓的权限,其实指的就是:用户是否能看到,以及是否允许其对数据进行增删改查的操作,因为现在开发项目的主流方式是前后端分离,所以整个项目的权限是后端权限控制搭配前端权限控制共同实现的

水冗水孚11阅读 1.5k

[译]Vue.js + Astro 比 Vue SPA 更好吗?
在本文中,我将向您展示如何使用 Astro 构建基于 Vue 的应用程序,我们将了解其独特的架构如何带来比单页应用程序 (SPA) 更好的性能。

杭州程序员张张7阅读 4.1k评论 3

Keep learning

851 声望
132 粉丝
宣传栏