vue路由懶加載如何實(shí)現(xiàn)

Vue路由的懶加載可以通過(guò)使用import()函數(shù)來(lái)實(shí)現(xiàn)。在定義路由時(shí)，可以將組件的引入部分放在import()函數(shù)中，如下所示：

const Foo = () => import('./Foo.vue')
const Bar = () => import('./Bar.vue')
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]

使用import()函數(shù)引入的組件會(huì)被打包成獨(dú)立的文件，并在頁(yè)面需要時(shí)進(jìn)行異步加載，以減少初始加載時(shí)間。注意，使用import()函數(shù)引入的組件需要使用箭頭函數(shù)的方式定義。

另外，如果使用Vue CLI創(chuàng)建項(xiàng)目，可以通過(guò)配置webpack的code splitting來(lái)自動(dòng)實(shí)現(xiàn)懶加載。在vue.config.js中添加以下配置：

module.exports = {
// ...
chainWebpack: config => {
config.plugins.delete('prefetch')
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options.compilerOptions = {
...options.compilerOptions,
isCustomElement: tag => /^ion-/.test(tag)
}
return options
})
}
}

這樣，在定義路由時(shí)，可以直接按照普通方式引入組件，如下所示：

import Foo from './Foo.vue'
import Bar from './Bar.vue'
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]

Vue CLI會(huì)自動(dòng)將這些組件進(jìn)行懶加載處理。