vue实现路由懒加载的3种方法示例
更新时间：2020年09月01日 15:04:42 作者：小小1001
这篇文章主要给大家介绍了关于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路由懒加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Element Plus是为适配Vue3而对Element UI进行重构后产生的前端组件库,包含丰富的基础组件,下面这篇文章主要给大家介绍了关于vue3引入Element-plus的相关资料,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了vue3中的createApp分析,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
今天小编就为大家分享一篇解决vue+element 键盘回车事件导致页面刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了vue3如何实现锚点定位点击滚动高亮问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
Vue3+Element Plus实现动态标签页以及右键菜单功能
这篇文章主要给大家介绍了关于Vue3+Element Plus实现动态标签页以及右键菜单功能的相关资料,Vue 3和Element Plus提供了一种简单的方法来实现侧边菜单栏与标签页之间的联动,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-09-09
这篇文章主要为大家详细介绍了Vue.js实现鼠标悬浮更换图片功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要为大家详细介绍了Vue Echarts实现仪表盘案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-12-12
pinia，一个基于Vue3的状态管理库，它可以帮助开发人员管理Vue应用程序的状态，本文主要为大家介绍了Pinia的用法，感兴趣的小伙伴可以跟随小编一起学习一下2023-06-06
这篇文章主要介绍了如何在vue单页中重复引入同一子组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue 使用vue-i18n做全局中英文切换的实现方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2018-10-10
最新评论