首先,查看官方手册
【此步骤不是必要的,可以直接看下面的实现步骤】
找到 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')
好了,到此为止,就完成路由懒加载啦~~