Vue Router 懒加载的三种方案
2021-10-28 本文已影响0人
Cherry丶小丸子
1、vue异步组件
这种情况下一个组件生成一个js文件
{
path: '/home',
name: 'home',
component: resolve => require(['../components/home.vue'], resolve)
}
2、es提案的 import()
// 下面2行代码,没有指定webpackChunkName,每个组件打包成一个js文件
const home = () => import('@/views/home/home.vue')
const index = () => import('@/views/index/index.vue')
// 下面2行代码,指定了相同的 webpackChunkName,会合并打包成一个js文件
const home = () => import(/* webpackChunkName: "home" */ '@/views/home/home.vue')
const index = () => import(/* webpackChunkName: "home" */ '@/views/index/index.vue')
export default new Router({
routes: [
{
path: '/home',
name: 'home',
component: home
},
{
path: '/index',
name: 'index',
component: index
}
]
})
3、webpack 的 require.ensure()
多个路由指定相同的 chunkName,会合并打包成一个js文件
{
path: '/promisedemo',
name: 'PromiseDemo',
component: resolve => require.ensure([], () => resolve(require('../components/PromiseDemo')), 'demo')
},
{
path: '/hello',
name: 'Hello',
component: resolve => require.ensure([], () => resolve(require('../components/Hello')), 'demo')
}