vue实现路由懒加载的3种方法示例
前言
路由懒加载在访问页面的时候非常重要，能够提高首页加载速度，避免出现加载时候白页，如果没有懒加载，webpack打包后的文件会非常大。
- import按需加载（常用）
- vue异步组件
- webpack提供的require.ensure()
1、import按需加载（常用）
允许将不同的组件打包到一个异步块中，需指定了相同的webpackChunkName。
把组件按组分块
const A = () => import(/* webpackChunkName: "group-A" */ '@/A/A.vue') const B = () => import(/* webpackChunkName: "group-A" */ '@/A/B.vue') const C = () => import(/* webpackChunkName: "group-A" */ '@/A/C.vue')
注意：如果使用的是 babel，需要安装syntax-dynamic-import插件，才能使 babel 可以正确地解析语法。
2、vue异步组件
使用vue的异步组件 , 实现按需加载，每个组件生成一个js文件，实现组件的懒加载。
/* vue异步组件 */
{ path: '/A', name: 'A', component: resolve => require(['@/components/A'],resolve) }
3、webpack提供的require.ensure()
vue-router配置路由，使用webpack的require.ensure技术，实现按需加载。
这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。
语法: require.ensure(dependencies: String[], callback: function([require]), [chunkName: String])
dependencies: 依赖的模块数组
callback: 回调函数，该函数调用时会传一个require参数
chunkName: 模块名，用于构建时生成文件时命名使用
const A= resolve => require.ensure([], () => resolve(require('@/components/A')), 'A');
注意：requi.ensure的模块只会被下载下来，不会被执行，只有在回调函数使用require(模块名)后，这个模块才会被执行。
总结
到此这篇关于vue实现路由懒加载的3种方法示例的文章就介绍到这了,更多相关vue路由懒加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue3时间戳转换， vue2转换时间戳的时候一般使用过滤器的方式，到vue3之后，vue3移除了过滤器，就不能再用了，官方是推荐使用方法或者计算属性的方式。下面我们来看看详细介绍吧</P><P>2021-12-12
这篇文章主要介绍了vue 地区选择器v-distpicker的常用功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
最近遇见一个需要上传超大大文件的需求,所以下面这篇文章主要给大家介绍了关于前端大文件上传与下载(分片上传)的详细过程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
由于公司网络登element-ui官方文档很慢,想把他载下来离线文档本地跑,下面这篇文章主要给大家介绍了关于本地部署element-plus文档的简单步骤,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
vue基础之v-bind属性、class和style用法分析
这篇文章主要介绍了vue基础之v-bind属性、class和style用法,结合实例形式分析了vue.js中v-bind绑定及class、style样式控制相关操作技巧,需要的朋友可以参考下2019-03-03
如何巧用Vue.extend继承组件实现el-table双击可编辑(不使用v-if、v-else)
这篇文章主要给大家介绍了关于如何巧用Vue.extend继承组件实现el-table双击可编辑的相关资料,不使用v-if、v-else,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
Vue3中shallowRef和shallowReactive的性能优化
Vue3中shallowRef和shallowReactive是浅层响应式API,用于性能优化,仅追踪对象或数组第一层属性的变化,本文就来详细的介绍一下具体的使用,感兴趣的可以了解一下2024-09-09
Vue warn:Property "state" was accessed during
这篇文章主要为大家介绍了Vue warn:Property "state" was accessed during render的报错解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
vue集成openlayers加载geojson并实现点击弹窗教程
这篇文章主要为大家详细介绍了vue集成openlayers加载geojson并实现点击弹窗教程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
最近写代码遇到一问题祖先级别的组件怎么操作孙子的儿子的组件方法，在网上搜了半天都是父子传参，父子操作，晕晕乎乎的想起了bus，接下来通过本文给大家介绍vue 祖先组件操作后代组件方法,需要的朋友可以参考下2022-11-11
最新评论