vue中的按需加載怎么實現

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

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

本教程操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

按需加載，又稱延遲加載或者懶加載，就是根據需要去加載資源，只有在使用到的時候才會加載進來。

為什么需要按需加載

隨著互聯網的發展，一個網頁需要承載的功能越來越多。 對于采用單頁應用作為前端架構的網站來說，會面臨著一個網頁需要加載的代碼量很大的問題，因為許多功能都集中的做到了一個 HTML 里。 這會導致網頁加載緩慢、交互卡頓，用戶體驗將非常糟糕。

導致這個問題的根本原因在于一次性的加載所有功能對應的代碼，但其實用戶每一階段只可能使用其中一部分功能。 所以解決以上問題的方法就是用戶當前需要用什么功能就只加載這個功能對應的代碼，也就是所謂的按需加載。

vue項目實現按需加載的方法

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

vue異步組件技術

vue-router配置路由，使用vue的異步組件技術，可以實現按需加載。這種方式下一個組件生成一個js文件

用例：

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

es提案的import() (推薦)

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

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

用例：

// 下面2行代碼，沒有指定webpackChunkName，每個組件打包成一個js文件。
const ImportFuncDemo1 = () => import('../components/ImportFuncDemo1')
const ImportFuncDemo2 = () => import('../components/ImportFuncDemo2')

// 下面2行代碼，指定了相同的webpackChunkName，會合并打包成一個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技術，也可以實現按需加載。

這種情況下，多個路由指定相同的chunkName，會合并打包成一個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')
}

以上就是關于“vue中的按需加載怎么實現”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。