路由懒加载的小技巧

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

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

Vue 路由懒加载根据根路由合并chunk块相关推荐

Vue3（撩课学院）笔记07-vueRouter路由，创建路由，路由重定向，路由跳转，动态路由，路由懒加载，路由嵌套，路由参数穿传递的两种形式，通过事件来跳转路由
1.vueRouter路由的两种模式哈希模式:以#号分割,前端路由一般用hash模式比较多,可以兼容ie8以上,井号后面不发起请求历史模式:putstate()和replaceState()方法入 ...
Vue—核心概念—异步组件和路由懒加载
原文地址:Vue 异步组件&路由懒加载目录异步组件异步组件介绍异步组件声明高级异步组件路由懒加载路由懒加载介绍路由懒加载方法把组件按组分块异步组件异步组件介绍在开发大型 ...
前端学习（2742）：重读vue电商网站52之路由懒加载
当打包构建项目时,JavaScript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 具体需要 3 步: 安 ...
vue路由懒加载_优化vue项目的首屏加载速度
最近使用vue-cli3构建了一个小型的博客系统,完工之后,build打包出来发现一个chunk-vendors包就有1.1m,部署上去之后,访问的时候,首屏加载非常慢.居然需要21s,体验极差. 这 ...
vue“路由懒加载” 技术，让网页快速加载（优化篇）
(含代码示例.截图演示)让中大型vue项目,按需加载文件,让网页快速渲染! 官方文档:路与懒加载所谓的路由懒加载: 代码示例 · 对比: 1. 没有优化的代码(截图1 · 省略) import Vu ...
Vue 路由懒加载
路由和组件的常用两种懒加载方式: 1.vue异步组件实现路由懒加载 component:resolve=>(['需要加载的路由的地址',resolve]) 2.es提出的import(推荐使用这 ...
图片懒加载和Vue路由懒加载
图片懒加载什么是懒加载? 懒加载也叫做延迟加载或者按需加载 .在长网页中延迟加载暂时未看到的图片数据,能够优化网页性能,提高用户体验 .在较长的网页或应用中,如果图片很多,等待全部图片都被加载出来需 ...
Vue路由懒加载报错问题解决
使用Vue路由懒加载时报了以下错误: 经过百度发现,出现该问题的原因是: import 属于异步引用组件,需要特殊的babel-loader处理解决办法: 安装babel用来编译import异步引用 ...
Vue 路由懒加载和动态加载
什么是路由懒加载? 不同组件有不同的 js 文件,当访问相应组件的时候才会加载其相应的js文件,而不是在首页统一加载,这样就优化了首页渲染的时间,提高页面首次渲染时间: 路由懒加载的原理? 底层是一个 ...

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

路由懒加载的小技巧

Vue 路由懒加载根据根路由合并chunk块相关推荐

最新文章

热门文章