Vue7 异步加载 懒加载

最新推荐文章于 2024-08-30 20:29:15 发布
最新推荐文章于 2024-08-30 20:29:15 发布
阅读量1.4k 收藏
点赞数
分类专栏： vue 文章标签： vue.js 前端 webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/duzhe17629085113/article/details/121961183
版权
本文介绍了在Vue.js开发中如何利用异步加载和懒加载优化前端性能，减少初次加载时的压力，提升用户体验。详细阐述了三种不同的异步组件实现方式，包括使用require和Promise，以及带延迟和错误处理的加载策略。
摘要由CSDN通过智能技术生成

vue开发过程中，我们会做出特别多特别多的组件，包括login,header,footer,main等等。这样使整个网站看起来就十分的庞大，当我们在打开网页的时候，突然一下子把这些所有的组件加载上来，这么多的请求全部同时开始请求，势必会造成网页打开很慢，使客户得到的是非常差劲的体验。

SPA: single page app

在单页应用中，如果没有用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时

异步加载并缓存组件：

1、 异步加载组件：用不到的组件不会加载，因此网页打开速度会很快，当你用到这个组件的时候，才会通过异步请求进行加载；

官方解释：Vue允许将组件定义为一个异步解析（加载）组件定义的工厂函数，即Vue只在实际需要渲染组件时，才会触发调用工厂函数，并且将结果缓存起来，用于将来再次渲染。

2、 组件缓存起，当你下一次再用到这个组件时，来：通过异步加载的组件会缓存起来丝毫不会有任何的疑迟，组件很快会从缓存中加载出来。

作业：import

对组件进行懒加载 不用的时候不加载 当调用的时候从缓存中渲染，

异步组件 延时加载 网页加载头像

首页面一般不用懒加载

第一种

components: {

   

    Box1:f

最低0.47元/天 解锁文章
BonjourDZ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue的异步加载组件（按需加载）与路由懒加载
tianmd_Eric的博客
10-23 885
异步组件&路由懒加载异步组件介绍异步组件声明路由懒加载介绍路由懒加载方法 异步组件介绍 在开发大型项目的时候，我们会把大型项目根据组件分割为小块代码，然后异步加载代码块，这样可以让首屏部分代码块优先加载，加快首屏渲染速度，其他代码块在需要的时候再加载，加载过的代码块会被缓存起来，以便复用重新渲染。 参考Vue官方文档异步加载. 异步组件声明 异步组件声明主要通过将 Vue.component() 方法的第二个声明为工厂函数，这个工厂函数会收到一个 resolve 回调，这个回调函数会在你从服务器
异步懒加载和彻底懒加载
m0_59849011的博客
11-15 248
异步懒加载: 彻底懒加载 :
通过异步的方式实现路由懒加载
lalunr的博客
09-10 200
通过异步实现路由懒加载
vue 路由的懒加载和异步加载
weixin_30544657的博客
07-08 508
1 使用路由懒加载和异步加载的原因--- 略2 使用方式 1. 异步加载组件 components:{ com-component: ()=>import('./view-async-component') } 2. 组件懒加载 routes:[ {path:'/writer',component()=>import('./writer.vue')...
WHAT - 懒加载和异步加载的区别
weixin_58540586的博客
05-21 591
- **懒加载**：适用于延迟加载图片、视频和长列表等资源，只有在需要时才加载。主要用于优化初始页面加载时间和减少不必要的网络请求。- **异步加载**：适用于JavaScript文件和其它资源，确保这些资源的加载不会阻塞页面的渲染。主要用于优化页面的整体加载性能。
解析vue路由异步组件和懒加载案例
12-02
这个方法会在运行时动态地创建一个新的 chunk，然后异步加载： ```javascript const first = r => require.ensure([], () => r(require('../components/first.vue')), 'chunkname1'); // ... 对其他组件做相同处理 ...
vue+webpack实现异步组件加载的方法
08-28
四、Vue异步组件加载的使用 在Vue中，可以使用异步组件加载来加载组件。在组件中，可以使用`components`选项来定义异步组件。例如： ``` export default { components: { 'child': function(resolve) { require...
解决vue动态路由异步加载import组件,加载不到module的问题
10-15
在Vue中，import()函数用于异步加载组件，常见于路由懒加载场景。这种方式可以有效减少首屏加载的资源量，提升应用的初始加载性能。然而，import()函数在不同的环境下可能需要不同的配置才能正常工作。上面提到的...
jquery实现异步加载图片（懒加载图片一种方式）
10-19
本篇文章主要介绍了jquery实现异步加载（懒加载图片一种方式），具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
详解vue-router的Import异步加载模块问题的解决方案
10-15
总结，处理 Vue Router 中 Import 异步加载模块的问题，关键在于理解 Webpack 的代码分割机制和 `import()` 语句的静态性要求。通过使用 `Promise.resolve().then()` 或调整代码结构来满足这些要求，可以有效地解决...
【vue异步加载】
weixin_45777909的博客
08-24 159
methods: { getStart() { // 岗位查询 const p1 = new Promise((resolve, reject) => { findAll().then((res) => { this.postObj = res.data; resolve(); }); }); // 组织机构 const p2 = new Promise.
【在Vue项目上使用异步加载】
u012632105的博客
02-16 790
在Vue项目上使用异步加载 - 简书
Vue组件异步加载
iqifenxia的博客
12-24 1004
　　一、vue的非编译模式 　　基于requireJS+VUE搭建的环境 　　（1）路由配置信息 　　A、异步加载组件 　　define(function(){ return [{ name: "my-component", path: "/myComponent", component: resolve=> require(['myComponent'], resolve), }];}); 　　B、同步加载组件 　　define(['myComponent'],function(my..
vue异步懒加载
zk_yxrs的博客
07-14 71
const routes = [ { path: '/', component: Index }, { //这里是懒加载 path: "/details/:lid", component: () => import( /* webpackChunkName: "zidingyiming" */ "../views/Details.vue" ), props:true }, ] vue彻底懒加载 .
vue 异步加载数据
liangmaxmin的博客
03-05 1272
1.使用ajax异步加载数据，再用props父子组件进行传值 js代码： //导入头部文件 import header from './components/header/header.vue'; const ERR_OK = 0; export default { data() { return { //定义一个flag确保ajax回调成功 ...
Vue 组件异步加载(懒加载)
dengduoan5084的博客
12-27 357
一、vue的编译模式 （1）路由配置信息 1 //eg1: 2 const MSite = resolve => require.ensure([], () =>resolve(require(['myComponent.vue'])) 3 4 //eg2 需要syntax-dynamic-import插件 5 const MSit...
vue笔记 - 异步路由懒加载
weixin_41293999的博客
04-08 197
异步组件 指只有页面需要的时候才从服务器加载的组件。 懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。 通过异步加载的方式, 可以实现按需加载组件, 这样可以提高页面的加载速度, 提高用户体验,解决白屏问题。 在webpack + vue中实现异步组件的方法不止一种。 方法一:import 方法二:resolve 方法三:require.ensure(...
Vue的状态管理——Vuex3&4&Pinia
最新发布
警警的博客
08-30 590
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
vue 异步懒加载图片
05-18
在 Vue 中异步懒加载图片可以使用 `vue-lazyload` 这个插件来实现。 首先安装 `vue-lazyload`： ```bash npm install vue-lazyload --save ``` 然后在 main.js 中引入并使用： ```javascript import Vue from '...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值