最近，公司的 SCRM 系统开发临近收尾，在扫尾的时候，发现个别页面加载巨慢，甚至出现卡顿！起初还以为是公共组件的问题，但逐一排查，发现完全没有发现！组件明明做得像德芙一样，哪用都丝般柔滑嘛！
   

折腾半宿，才想起来，问题该是出在路由上。因为项目上线时间紧，是三人共同开发的，在页面开发前，其中一个同事已经把路由加好了，所谓加好了，是这么个样子：

问题找到了，解决方案，也正是今天想讨论的重点：组件的按需加载

1、vue异步组件技术
vue-router配置路由，使用vue的异步组件技术，可以实现按需加载。
但是，这种情况下一个组件生成一个js文件。
举例如下：

export default new Router({
    routes: [
        {
            path:'/grid',
            component:resolve=>require(['@/components/pages/Grid'],resolve),
            name:'Grid'
        },
        {
            path:'/accord',
            component:resolve=>require(['@/components/pages/Accord'],resolve),
            name:'Accord'
        }
    ]
})

2. (推荐) ES提案的import()
·推荐使用这种方式(需要webpack > 2.4)
·webpack官方文档：webpack中使用import()
·vue官方文档：路由懒加载(使用import())

vue-router配置路由，代码如下：

// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。
const Grid = ()=>import('@/components/pages/Grid')
const Accord = ()=>import('@/components/pages/Accord')

// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。
const Grid = () => import(/* webpackChunkName: 'ImportFuncs' */ '@/components/pages/Grid')
const Accord = () => import(/* webpackChunkName: 'ImportFuncs' */ '@/components/pages/Accord')

export default new Router({
    routes: [
        {
            path: '/grid',
            name: 'Grid',
            component: Grid
        },
        {
            path: '/accord',
            name: 'Accord',
            component: Accord
        }
    ]
})

[color=#ff4753]*[/color]敲重点：同一个 webpackChunkName，Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。

3. webpack提供的require.ensure()

· vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。
这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。
举例如下：
```html:run

export default new Router({
    routes: [
        {
            path:'/grid',
            component: resolve => require.ensure([], () => resolve(require('@/components/pages/Grid')), 'ImportFuncs'),
            name:'Grid'
        },
        {
            path:'/accord',
            component: resolve => require.ensure([], () => resolve(require('@/components/pages/Accord')), 'ImportFuncs'),
            name:'Accord'
        }    
        ]
})

```
参考文章