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

非懒加载

import Home form './home.vue';

// ...
{
	name: 'Home',
	path: '/home',
	component: Home
}
1
2
3
4
5
6
7
8

require 异步加载 ‘@/components/home’

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

import 引入，动态加载

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

webpack chunkName

标明相同的 webpackChunkName 的路由将会被合并打包进同一 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
}
1
2
3
4
5
6
7
8
9
10
11
12
13