为什么要使用路由懒加载？

当我们项目在打包构建时整一个js的包会变得非常的大，会影响页面的加载速度

什么是路由懒加载？

路由懒加载就是将不同路由对应的组件分割成不同的代码块，在路由被访问的时候再去加载对应的组件，从而提高页面的加载效率。

路由懒加载的步骤：

需要先安装一个叫 syntax-dynamic-import的插件，只有安装了这个bable插件才能使用chunkName语法，来分割我们的路由代码块

npm install --save-dev @babel/plugin-syntax-dynamic-import

  1. 需要在 bable.config.js 文件中导入这个插件，在 bable.config.js 中的Plugins 数组中将插件名字写上即可
  2. 插件安装完毕，实现路由懒加载

使用 chunkName 一种想注释一样的特殊语法来分割代码

1
2
3
4
5
6
7
8
9
//传统的组件导入方式
import Foo from './Foo.vue'

//使用路由懒加载的导入方式
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')

//Foo 组件的名称
//"group-foo" 分组名称
//'./Foo.vue' 组件的路径