本文共 1749 字，大约阅读时间需要 5 分钟。

路由懒加载的小技巧

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

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')        }      ]    }  ]})

转载地址：http://xcyws.baihongyu.com/