在vue中，按需加載又稱延遲加載或者懶加載，就是根據(jù)需要去加載資源；vue項(xiàng)目實(shí)現(xiàn)按需加載有3種方式：vue異步組件技術(shù)、es提案的import()、webpack提供的“require.ensure()”。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

按需加載，又稱延遲加載或者懶加載，就是根據(jù)需要去加載資源，只有在使用到的時(shí)候才會(huì)加載進(jìn)來(lái)。

為什么需要按需加載

隨著互聯(lián)網(wǎng)的發(fā)展，一個(gè)網(wǎng)頁(yè)需要承載的功能越來(lái)越多。 對(duì)于采用單頁(yè)應(yīng)用作為前端架構(gòu)的網(wǎng)站來(lái)說(shuō)，會(huì)面臨著一個(gè)網(wǎng)頁(yè)需要加載的代碼量很大的問(wèn)題，因?yàn)樵S多功能都集中的做到了一個(gè) HTML 里。 這會(huì)導(dǎo)致網(wǎng)頁(yè)加載緩慢、交互卡頓，用戶體驗(yàn)將非常糟糕。

導(dǎo)致這個(gè)問(wèn)題的根本原因在于一次性的加載所有功能對(duì)應(yīng)的代碼，但其實(shí)用戶每一階段只可能使用其中一部分功能。 所以解決以上問(wèn)題的方法就是用戶當(dāng)前需要用什么功能就只加載這個(gè)功能對(duì)應(yīng)的代碼，也就是所謂的按需加載。

vue項(xiàng)目實(shí)現(xiàn)按需加載的方法

vue項(xiàng)目實(shí)現(xiàn)按需加載的3種方式：vue異步組件技術(shù)、es提案的import()、webpack提供的require.ensure()

vue異步組件技術(shù)

vue-router配置路由，使用vue的異步組件技術(shù)，可以實(shí)現(xiàn)按需加載。這種方式下一個(gè)組件生成一個(gè)js文件

用例：

{     path: '/promisedemo',     name: 'PromiseDemo',     component: resolve => require(['../components/PromiseDemo'], resolve) }

es提案的import() (推薦)

webpack官方文檔：webpack中使用import()

vue官方文檔：路由懶加載(使用import())

用例：

// 下面2行代碼，沒(méi)有指定webpackChunkName，每個(gè)組件打包成一個(gè)js文件。 const ImportFuncDemo1 = () => import('../components/ImportFuncDemo1') const ImportFuncDemo2 = () => import('../components/ImportFuncDemo2')  // 下面2行代碼，指定了相同的webpackChunkName，會(huì)合并打包成一個(gè)js文件。 // const ImportFuncDemo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo') // const ImportFuncDemo2 = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo2') export default new Router({     routes: [         {             path: '/importfuncdemo1',             name: 'ImportFuncDemo1',             component: ImportFuncDemo1         },         {             path: '/importfuncdemo2',             name: 'ImportFuncDemo2',             component: ImportFuncDemo2         }     ] })

webpack提供的require.ensure()

vue-router配置路由，使用webpack的require.ensure技術(shù)，也可以實(shí)現(xiàn)按需加載。

這種情況下，多個(gè)路由指定相同的chunkName，會(huì)合并打包成一個(gè)js文件。

舉例如下：

{     path: '/promisedemo',     name: 'PromiseDemo',     component: resolve => require.ensure([], () => resolve(require('../components/PromiseDemo')), 'demo') }, {     path: '/hello',     name: 'Hello',     // component: Hello     component: resolve => require.ensure([], () => resolve(require('../components/Hello')), 'demo') }

【