Vue 之配置路由懒加载

首先，查看官方手册

【此步骤不是必要的，可以直接看下面的实现步骤】

找到 Vue Router 官方手册，找到 “路由懒加载” 模块，点击跳转
在该页面内找到 syntax-dynamic-import 插件链接，如下图所示：

然后开始实现

第一步，安装 syntax-dynamic-import 插件

安装方式一：npm 安装

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

安装方式二：可视化安装

第二步，声明 syntax-dynamic-import 插件

在项目中找到 babel.config.js ，添加代码

module.exports = {
  'plugins': [
    '@babel/plugin-syntax-dynamic-import'
  ]
}

第三步，使用路由懒加载方式加载路由

其中，group-Foo-Bar 和 group-Baz 为分组名称，分组名称相同的为一组

const Foo = () => import(/* webpackChunkName: "group-Foo-Bar" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-Foo-Bar" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-Baz" */ './Baz.vue')

好了，到此为止，就完成路由懒加载啦~~