vue路由懒加载–2种实现方式

vue路由懒加载–2种实现方式1 vue 异步组件 路由懒加载 component resolve gt 需要加载的路由的地址 resolve 2 import 实现路由懒加载 推荐 constHelloWo gt import 需要加载的模块地址 1 路由懒加载作用 首屏组件加载速度更快一些 解决白屏问题 更好的客户体验 也是性能优化的一种方式 什么是路由懒加载 懒加载简单来说就是延迟加载或按需加载 就是用到的时候再进行加载 2 使用 详情

(1)vue异步组件-路由懒加载

component:resolve=>(['需要加载的路由的地址',resolve])

(2)import  实现路由懒加载 [ 推荐 ] 

const HelloWorld = ()=>import('需要加载的模块地址')


1.路由懒加载

作用:

首屏组件加载速度更快一些,解决白屏问题;更好的客户体验;

也是性能优化的一种方式;

什么是路由懒加载?

懒加载简单来说就是延迟加载或按需加载,就是用到的时候再进行加载。


2.使用-详情

– – 2.1.异步组件-路由懒加载

– – – 2.1.1.使用方法

语法:component:resolve=>(require([‘需要加载的路由的地址’]),resolve)

import Vue from 'vue' import Router from 'vue-router' /* 此处省去之前导入的HelloWorld模块 */ Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: resolve=>(require(["@/components/HelloWorld"],resolve)) } ] })

– – – 2.1.2. import方法:

语法:const HelloWorld = ()=>import(‘需要加载的模块地址’)

import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: ()=>import("@/components/HelloWorld") } ] }) 

– – – 2.1.3.webpack提供的require.ensure( )

{ path: '/home', name: 'Home', component: r => require.ensure([],() => r(require('@/components/HelloWorld')), 'home') }

 – – 2.2.组件懒加载

– – – 2.2.1.异步方法

 
      

– – – 2.2.2. import方法

 
      

[1] 参考文章 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/215763.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月18日 下午1:29
下一篇 2026年3月18日 下午1:29


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号