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路由懒加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
组件又分为非单文件组件和单文件组件，一般常用的就是单文件组件，这篇文章主要介绍了vue组件非单文件组件的使用步骤,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了Vue3之 页面,菜单,路由的使用，文章围绕Vue3页面,菜单,路由相关资料展开详细内容,需要的朋友可以参考一下2021-11-11
这篇文章主要介绍了使用vue-cli打包过程中的步骤以及问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了解决vue组件销毁之后计时器继续执行的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了Vue Router动态路由使用方法总结,需要的朋友可以参考下2023-10-10
这篇文章主要为大家详细介绍了vue+Element ui实现照片墙效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了vue3优雅的使用element-plus的dialog,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章主要介绍了Vue通过vue-router实现页面跳转的操作步骤,文中有详细的代码示例和图文供大家参考,对大家的学习或工作有一定的帮助,感兴趣的朋友可以参考下2024-04-04
基于vue-cli、elementUI的Vue超简单入门小例子（推荐）
这篇文章主要介绍了基于vue-cli、elementUI的Vue超简单入门小例子，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
下面小编就为大家分享一篇vue2.0使用swiper组件实现轮播的示例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
最新评论