Vue-Router + Webpack 路由懒加载实现

Admin
Admin
Admin
52
文章
6
评论
2020年4月23日17:10:39 评论 962 826字阅读2分45秒

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

一、官方文档说明

二、未使用路由懒加载时的配置

三、路由懒加载时的配置

  1. import Vue from 'vue';
  2. import Router from 'vue-router';
  3. Vue.use(Router);
  4. export default new Router({
  5.     mode: 'history',
  6.     base: process.env.BASE_URL,
  7.     routes: [
  8.         {
  9.             path: '/',
  10.             name: 'home',
  11.             component: () => import(/* webpackChunkName: "home" */ './views/Home.vue')
  12.         },
  13.         {
  14.             path: '/about',
  15.             name: 'about',
  16.             component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
  17.         }
  18.     ]
  19. });

以上是按照官方文档写的懒加载代码,但是发现chunk命名并没生效,再去仔细看看官方文档说明

“结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载”

其实还差一个 webpack 配置,就是 webpack output 需要加个 chunkFilename

  1. chunkFilename: '[name].js'

四、懒加载方法的封装

时间是一个好东西,记录的是学习的证据

继续阅读
Admin
  • 本文由 发表于 2020年4月23日17:10:39
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
Vue 中计算属性和侦听器 前端开发

Vue 中计算属性和侦听器

在 Vue 中通常我们会在模板绑定表达式,模板是用来描述视图结构的。如果模板中的表达式存在过多的逻辑性语句,那么整个模板就会变得特别的臃肿,可读性和维护性将会降低,因此为了简化逻辑,我们可以使用计算属...
浅谈 JS 中的防抖和节流操作 前端开发

浅谈 JS 中的防抖和节流操作

一般在进行窗口的 resize、scroll 等输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。此时我们可以采用 debounce(防抖)和 thr...
JS中的「import」和「require 」的区别 前端开发

JS中的「import」和「require 」的区别

import 和 require 是 JS 模块化编程使用的,模块化是一种将系统分离成独立功能部分的方法,一个模块是为完成一个功能的一段程序或子程序,"模块"是系统中功能单一且可替换的部分。模块化思想...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: