歡迎觀看《Vue Router 實戰（第4版）》視頻課程

1. 1. 路由懶加載

當打包構建應用時，JavaScript 包會變得非常大，影響頁面加載。如果我們能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就會更加高效。

Vue Router 支持開箱即用的動態導入，這意味著你可以用動態導入代替靜態導入：

// 將

// import UserDetails from './views/UserDetails.vue'

// 替換成

const UserDetails = () => import('./views/UserDetails.vue')

const router = createRouter({

??// ...

??routes: [

????{ path: '/users/:id', component: UserDetails }

????// 或在路由定義里直接使用它

????{ path: '/users/:id', component: () => import('./views/UserDetails.vue') },

??],

})

component (和 components) 配置接收一個返回 Promise 組件的函數，Vue Router 只會在第一次進入頁面時才會獲取這個函數，然后使用緩存數據。這意味著你也可以使用更復雜的函數，只要它們返回一個 Promise ：

const UserDetails = () =>

??Promise.resolve({

????/* 組件定義 */

??})

一般來說，對所有的路由都使用動態導入是個好主意。

注意

不要在路由中使用異步組件。異步組件仍然可以在路由組件中使用，但路由組件本身就是動態導入的。

如果你使用的是 webpack 之類的打包器，它將自動從代碼分割中受益。

如果你使用的是 Babel，你將需要添加 syntax-dynamic-import 插件，才能使 Babel 正確地解析語法。

1. 1. 1. 把組件按組分塊

使用 webpack

有時候我們想把某個路由下的所有組件都打包在同個異步塊 (chunk) 中。只需要使用命名 chunk，一個特殊的注釋語法來提供 chunk name (需要 Webpack > 2.4)：

const UserDetails = () =>

??import(/* webpackChunkName: "group-user" */ './UserDetails.vue')

const UserDashboard = () =>

??import(/* webpackChunkName: "group-user" */ './UserDashboard.vue')

const UserProfileEdit = () =>

??import(/* webpackChunkName: "group-user" */ './UserProfileEdit.vue')

webpack 會將任何一個異步模塊與相同的塊名稱組合到相同的異步塊中。

使用 Vite

在Vite中，你可以在rollupOptions下定義分塊：

// vite.config.js

export default defineConfig({

??build: {

????rollupOptions: {

??????// https://rollupjs.org/guide/en/#outputmanualchunks

??????output: {

????????manualChunks: {

??????????'group-user': [

????????????'./src/UserDetails',

????????????'./src/UserDashboard',

????????????'./src/UserProfileEdit',

??????????],

????????},

??????},

????},

??},

})