如何在vue项目中实现按需加载

1. vue异步组件技术

vue-router配置路由如下，这种方式下一个组件生成一个js文件

{
    path: '/home',
    name: 'home',
    component: resolve => require(['../home/index'], resolve)
}

2. es6的import() 推荐

路由懒加载

//没有指定webpackChunkName的情况下，每个组件打包成一个js文件
const home1 = () => import('../home1/index')
const home2 = () => import('../home2/index')

//设置了webpackChunkName，会合并打包成一个js文件
{
    path: '/home1',
    name: 'home1',
    component: () =>import(/* webpackChunkName: "home" */,'../home2/index')
}
{
    path: '/home2',
    name: 'home2',
    component: () => import(/* webpackChunkName: "home"*/,'../home2/index')
}

3. webpack提供的require.ensure()

多个路由指定相同的chunkName，会合并打包成一个js文件

{
    path: '/home1',
    name: 'home1',
    component: resolve => require.ensure([],() => resolve(require('../home1/index')),'home')
},
{
    path: '/home2',
    name: 'home2',
    component: resolve => require.ensure([],() => resolve(require('../home2/index')),'home')
}