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中文网其他相关文章！