WebPack動態註釋中的VUE懶負載路由

JavaScript路由機制通常是指定哪個相對URL模式對應哪個組件渲染。例如， /about路徑應該渲染<about></about>組件。本文將介紹如何在Vue/Vue Router中使用懶加載實現這一目標，並儘可能簡潔地完成它。

GitHub上提供了一個包含本文所有內容的代碼倉庫。

你可能見過這樣的Vue路由（URLs）：

 import Vue from 'vue'
import VueRouter from 'vue-router'

import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Login from '../views/Login.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About },
  { path: '/login', name: 'Login', component: Login }
]

const router = new VueRouter({
  routes
})

export default router

這段代碼會在/路徑加載<home></home>組件，在/about路徑加載<about></about>組件，在/login路徑加載<login></login>組件。

然而，這種方法代碼分割做得併不好，因為所有三個組件都會打包在一起，而不是根據需要動態加載。

以下是一種改進方法，它使用動態導入語句和webpack chunk名稱進行代碼分割：

 const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "Home" */ '../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "About" */ '../views/About.vue')
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import(/* webpackChunkName: "Login" */ '../views/Login.vue')
  }
]

這種方法很好，沒有明顯的缺點，只是稍微冗長和重複。作為優秀的開發者，讓我們進行一些抽象來改進它，使用一個數組並進行.map操作：

 const routeOptions = [
  { path: '/', name: 'Home' },
  { path: '/about', name: 'About' },
  { path: '/login', name: 'Login' }
]

const routes = routeOptions.map(route => {
  return {
    ...route,
    component: () => import(`@/views/${route.name}.vue`)
  }
})

const router = new VueRouter({
  routes
})

現在我們減少了component鍵的使用，而是使用路由名稱作為導入函數的參數。

但是，如果我們想設置chunk名稱怎麼辦？

據我所知，如果不進行某種構建步驟，你無法在JavaScript中使用動態註釋。因此，在這種情況下，我們犧牲了註釋（webpackChunkName）來減少代碼編寫量。完全取決於你更喜歡哪種方式。

開玩笑的，讓我們來解決這個問題。

從webpack 2.6.0 開始，支持佔位符[index]和[request] ，這意味著我們可以這樣設置生成的chunk的名稱：

 // ...

const routeOptions = [
  { path: '/', name: 'Home' },
  { path: '/about', name: 'About' },
  { path: '/login', name: 'Login' }
]

const routes = routeOptions.map(route => {
  return {
    ...route,
    component: () => import(/* webpackChunkName: "[request]" */ `../views/${route.name}.vue`)
  }
})

const router = new VueRouter({
  routes
})

很好！現在我們擁有了所有的功能，以及具有命名chunk的動態加載路由。它適用於Vue 2和Vue 3。你可以通過在終端運行npm run build來檢查它：

但是，我們還可以通過將懶加載路由分組到命名chunk中，而不是單個組件來更進一步。例如，我們可以創建一些組，將最重要的組件組合在一起，其餘的放在另一個“不太重要”的組中。我們只需更新webpackChunkName來代替我們之前使用的[request]佔位符：

 const routes = [
  {
    path: "/",
    name: "Home",
    component: () =>
      import(/* webpackChunkName: "VeryImportantThings" */ "../views/Home.vue")
  },
  {
    path: "/about",
    name: "About",
    component: () =>
      import(/* webpackChunkName: "VeryImportantThings" */ "../views/About.vue")
  },
  {
    path: "/login",
    name: "Login",
    component: () =>
      import(/* webpackChunkName: "NotSoImportant" */ "../views/Login.vue")
  },
  {
    path: "/contact",
    name: "Contact",
    component: () =>
      import(/* webpackChunkName: "NotSoImportant" */ "../views/Contact.vue")
  }
];

現在我們的四個組件被分組到兩個單獨的chunk中。

就是這樣！一種在Vue中懶加載路由的技術，以及一些關於如何在構建時命名和分組它們的建議。

以上是WebPack動態註釋中的VUE懶負載路由的詳細內容。更多資訊請關注PHP中文網其他相關文章！