vue2懒加载

最新推荐文章于 2025-04-11 10:18:18 发布

nnsword

最新推荐文章于 2025-04-11 10:18:18 发布

阅读量700

点赞数

分类专栏：前端开发

本文链接：https://blog.youkuaiyun.com/nnsword/article/details/83015023

版权

前端开发专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了Vue2中懒加载的实现方式，包括路由懒加载和Vuex模块懒加载，通过按需加载提高应用性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue2懒加载学习

懒加载
- 路由懒加载
- vuex模块懒加载

懒加载

懒加载是指在使用时再去加载需要的模块（js文件）。

路由懒加载

{
path: 'resource',
name: 'resource',
component: () => import (/* webpackChunkName: "group-client" */ '@/view/client/resourceManage')
}

vuex模块懒加载

import (/* webpackChunkName: "group-client" */ @/view/client/resourceManage').then(module => {
     store.registerModule(to.meta.storeName, module.default, {
       preserveState: true,
       runInNewContext: 'once'
    })
  }
)

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

nnsword

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue懒加载

weixin_45357661的博客

11-22

7756

Vue懒加载

Vue2图片懒加载（vue-lazyload）

Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者

08-16

852

在 vue2 中使用图片懒加载，支持：统一默认图；或者使用不同的默认图；默认图支持本地图片或网络图片

参与评论您还未登录，请先登录后发表或查看评论

Vue路由（2.路由的懒加载）

最新发布

qq_58956504的博客

04-11

223

它允许你在需要时才加载和执行代码，而不是在页面加载时就加载所有代码。通过懒加载，Vue Router 可以在用户访问某个路由时动态加载组件，而不是一次性加载所有组件。它允许你在需要时才加载和执行代码，而不是在页面加载时就加载所有代码。通过懒加载，Vue Router 可以在用户访问某个路由时动态加载组件，而不是一次性加载所有组件。在 Vue.js 中，路由懒加载是一种优化技术，它允许你在用户访问某个路由时才加载对应的组件，而不是在应用启动时一次性加载所有组件。当路由被访问时，组件会被自动加载。

vue 实现懒加载

When you can't win by being better, you can win by being different.

04-23

6048

懒加载，也称为延迟加载，是一种将资源（如图片、组件、代码等）推迟到需要的时候再加载的策略。在 Vue 中，懒加载通常涉及到组件和图片的加载。

Vue 懒加载

我是二川兄，对Web开发、GIS开发、3D模型、机器学习、面试技巧等方面都有一些涉猎~ 欢迎您加入技术交流圈！你可以在我的文章末尾找到我~

09-04

7016

Vue 懒加载

Vue组件懒加载

qq_54334713的博客

04-25

4846

本文将介绍如何在Vue 2和Vue 3中实现组件懒加载和一些使用场景，附有案例

vue2组件实现懒加载浅析

08-30

Vue2组件实现懒加载是一种优化策略，用于提升单页应用（SPA）的性能。懒加载，也称为延迟加载，指的是仅在需要时才加载资源，这样可以显著减少初始加载时间，提升用户体验。在大型SPA中，如果所有组件一次性加载，...

vue实现路由懒加载及组件懒加载的方式

10-16

Vue.js 作为一个流行的前端框架，提供了多种优化技术，其中路由懒加载和组件懒加载是两种有效提升应用性能的方法。本文将详细介绍如何在Vue.js项目中实现路由和组件的懒加载。首先，让我们理解什么是懒加载。懒...

vue2笔记 — vue-router路由懒加载的实现

12-09

在Vue.js开发的单页面应用（SPA）中，Vue Router 提供了路由懒加载的功能，以解决由于大型项目导致的打包文件过大的问题。 Vue Router 是 Vue.js 的官方路由库，用于管理SPA中的各个视图组件。在默认情况下，所有...

深入浅出 Vue2 和 Vue3 中的异步组件与懒加载

mmc123125的博客

12-28

1321

随着现代前端应用的复杂性增加，性能优化成为了开发者关注的重点之一。异步组件和懒加载（Lazy Loading）是目前最常见的性能优化技术之一，通过将组件按需加载，能够显著减小初次加载的包体积，从而提高用户体验。在 Vue.js 中，异步组件不仅能够有效提升页面加载速度，还能提升应用的响应性。本文将详细讲解 Vue2 和 Vue3 中如何使用异步组件以及懒加载，并对比两者的异同之处，帮助你更好地理解异步组件的实现方式以及如何在项目中优化其使用。

vue 懒加载

Allanwhy的博客

05-06

473

懒加载概念对于页面有很多静态资源的情况下（比如网商购物页面），为了节省用户流量和提高页面性能，可以在用户浏览到当前资源的时候，再对资源进行请求和加载。为什么需要懒加载？像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行...

Vue中的懒加载

不爱吃面的北方人

09-18

483

1.路由懒加载 export default new Router({ router:[ path:'/myproject', name:'myproject', //懒加载 resolve=>require([URL],resolve) compontent:resolve=>require(['../pag...

vue2组件懒加载

yangling_123的博客

07-19

311

https://www.cnblogs.com/zhanyishu/p/6587571.html

Vue懒加载

u012174809的专栏

09-23

442

进了一个新公司，发现在一个查询人员竟不用select而是弹出一个分页框....，个人觉得这种体验不太好，针对目前数据量不太大，用懒加载方式更易操作简，特附上代码思路是，一次性拿上全部DATA，然后监听下拉scroll,进行分批渲染效果图，下拉即加载 v-model="memberbean" v-el-select-loadmore:rangeNumber="loadMore(rangeNumber)" c..

懒加载（vue）

MoXinXueWEB的博客

02-16

2957

小菜鸟在摸鱼

vue2 封装组件 -- 懒加载

weixin_62219002的博客

05-16

414

图片的懒加载功能是通过IntersectionObserver来实现的。没有封装的原生懒加载。

vue2懒加载动态数据的土坯那

01-10

### 实现Vue2中的懒加载动态数据在Vue2项目中实现懒加载动态数据可以采用`IntersectionObserver` API或是第三方插件如`vue-lazyload`。对于动态数据而言，通常是指随着用户的交互行为（比如滚动页面），按需从服务器获取并渲染更多内容。 #### 使用`IntersectionObserver` API实现懒加载动态数据通过监听目标元素与浏览器视窗的交集情况来决定何时发起新的请求以加载额外的数据。这种方式不需要依赖任何外部库，并且性能较好[^1]。 ```javascript // 假设有一个无限滚动组件 InfiniteScroll.vue <template> <div class="infinite-scroll">  <ul> <li v-for="(item, index) in items" :key="index">{{ item }}</li> </ul>  <p v-if="isLoading">Loading...</p>  <div ref="observer"></div> </div> </template> <script> export default { data() { return { items: [], // 存储已经加载过的项 page: 1, // 当前页码 isLoading: false // 是否处于加载状态 }; }, mounted() { this.loadMoreItems(); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting && !this.isLoading) { this.loadMoreItems(); } }); }); observer.observe(this.$refs.observer); }, methods: { async loadMoreItems() { try { this.isLoading = true; // 模拟网络延迟 await new Promise(resolve => setTimeout(resolve, 1000)); // 获取下一页的数据 const response = await fetch(`/api/items?page=${this.page}`); const newData = await response.json(); // 更新本地存储的状态 this.items.push(...newData.results); this.page += 1; } catch(error){ console.error('Failed to load more items:', error); } finally { this.isLoading = false; } } } }; </script> ``` 此代码片段展示了如何创建一个简单的无限滚动效果，在每次接近底部时自动追加更多的列表项到现有集合中去。每当观察的目标元素进入视野范围内就会调用`loadMoreItems()`函数从而向API发送请求获得新增的内容。 #### 结合`vue-lazyload`插件处理图片资源除了上述方式外，还可以利用专门针对媒体文件设计好的工具——例如之前提到过的`vue-lazyload`—来进行更高效的管理。这不仅限于静态图像路径，也可以扩展至其他类型的异步加载场景，像视频封面图之类的多媒体素材都可以受益于此种策略[^2]。 ```html  <img v-lazy="dynamicImageUrl"/> ``` 这里假设`dynamicImageUrl`是一个由父级传递下来的prop或者是计算属性的结果，它会在适当的时候被赋值成实际存在的URL地址；而在此之前则会展示预定义好的占位符图形直到真实对象完全下载完毕为止。