Vue 路由懒加载根据根路由合并chunk块

最新推荐文章于 2024-07-10 16:57:37 发布

左手121

最新推荐文章于 2024-07-10 16:57:37 发布

阅读量3k

点赞数 1

分类专栏：前端知识文章标签： vue

本文链接：https://blog.csdn.net/qq_20282263/article/details/88053377

版权

前端知识专栏收录该内容

68 篇文章 1 订阅

订阅专栏

路由懒加载的小技巧

一般来说当我们的项目越来越大的时候，我们打包的文件也越来越大。这时候我们的首屏加载就会很慢。因此我们会使用到路由的懒加载机制来对我们的模块进行划分。

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/A',
      component: () => import('./components/A.vue'),
      children: [
        {
          path: 'A1',
          component: () => import('./components/A1')
        },
        {
          path: 'A2',
          component: () => import('./components/A2')
        }
      ]
    },
    {
      path: '/B',
      component: () => import('./components/B'),
      children: [
        {
          path: 'B1',
          component: () => import('./components/B1')
        },
        {
          path: 'B2',
          component: () => import('./components/B2')
        }
      ]
    }
  ]
})

如上图我们使用了路由懒加载，但是这样就会导致打包出 6 个 chunk 块。项目越来越大就会导致 chunk 块越来越大。如下如：

在这里插入图片描述

因此：我们是否能否根据顶级路由作为一个模块，将其子路由的模块打包到一起？

/* webpackChunkName: “A” */ 这个指定了打包chunk块的名字，这样我们就能将同类路由下的左键打包到同一个 chunk 块

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/A',
      component: () => import(/* webpackChunkName: "A" */ './components/A.vue'),
      children: [
        {
          path: 'A1',
          component: () => import(/* webpackChunkName: "A" */ './components/A1')
        },
        {
          path: 'A2',
          component: () => import(/* webpackChunkName: "A" */ './components/A2')
        }
      ]
    },
    {
      path: '/B',
      component: () => import(/* webpackChunkName: "B" */ './components/B'),
      children: [
        {
          path: 'B1',
          component: () => import(/* webpackChunkName: "B" */ './components/B1')
        },
        {
          path: 'B2',
          component: () => import(/* webpackChunkName: "B" */ './components/B2')
        }
      ]
    }
  ]
})