Vue路由的懶加載可以通過使用import()函數來實現。在定義路由時，可以將組件的引入部分放在import()函數中，如下所示：
const Foo = () => import('./Foo.vue')
const Bar = () => import('./Bar.vue')
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
使用import()函數引入的組件會被打包成獨立的文件，并在頁面需要時進行異步加載，以減少初始加載時間。注意，使用import()函數引入的組件需要使用箭頭函數的方式定義。
另外，如果使用Vue CLI創建項目，可以通過配置webpack的code splitting來自動實現懶加載。在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
})
}
}
這樣，在定義路由時，可以直接按照普通方式引入組件，如下所示：
import Foo from './Foo.vue'
import Bar from './Bar.vue'
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
Vue CLI會自動將這些組件進行懶加載處理。
