vue中的按需加載怎么實(shí)現(xiàn)

這篇“vue中的按需加載怎么實(shí)現(xiàn)”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“vue中的按需加載怎么實(shí)現(xiàn)”文章吧。

在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')
}

以上就是關(guān)于“vue中的按需加載怎么實(shí)現(xiàn)”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。