vue組件按需加載

   最近，公司的 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'
        }    
        ]
})

```
參考文章