【Vue-Router】路由懒加载的几种方式

東方幻想郷2023-11-16 15:30

路由懒加载

非懒加载
[require 异步加载 '@/components/home'](#require 异步加载 ‘@/components/home’)
[import 引入，动态加载](#import 引入，动态加载)
[webpack chunkName](#webpack chunkName)

非懒加载

js 复制代码

import Home form './home.vue';

// ...
{
	name: 'Home',
	path: '/home',
	component: Home
}

require 异步加载 '@/components/home'

js 复制代码

{
	name: 'Home',
	path: '/home',
	component: resolve => require(['@/components/home'], resolve)
}

import 引入，动态加载

js 复制代码

{
	name: 'Home',
	path: '/home',
	component: () => import('@/pages/Home/index.vue')
}

webpack chunkName

标明相同的 webpackChunkName 的路由将会被合并打包进同一 JS 文件

js 复制代码

const Home = () => import( /* webpackChunkName: 'demo' */ , '@/pages/Home/index.vue')
const Login = () => import( /* webpackChunkName: 'demo' */ , '@/pages/Login/index.vue')

{
	name: 'Home',
	path: '/home',
	component: Home
},
{
	name: 'Login',
	path: '/login',
	component: Login
}