需要近期研究的项目

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')
}
上一篇下一篇

猜你喜欢

热点阅读