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.js教學】

以上是vue中什麼是按需加載的詳細內容。更多資訊請關注PHP中文網其他相關文章！