require异步加载vue组件可能导致的问题

最新推荐文章于 2023-04-26 15:04:42 发布
最新推荐文章于 2023-04-26 15:04:42 发布
阅读量1.3k 收藏
点赞数
文章标签： javascript python ViewUI
原文链接：https://my.oschina.net/jamesview/blog/1840846
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

 

问题背景: 

      我们用vue为了增加首屏加载的速度,要么在引入路由时使用require代替import,要么将单页面配置成多页面,虽然页面首次加载速度会快一些,但是可能导致我们不同组件加载顺序混乱;

b6270efc934c7f647fb890aaee0bcb0be21.jpg

6323ba7319aebc6775b34f1a1370658c6b8.jpg

4696f9ce9d0a373d51d1856a6f8f786ebba.jpg

解决方案:

  将import代替require,或者使用vuex变量去获取组件状态

0a7dd8966a54034f77f57913734f2d8182e.jpg

46d5eeeaeaf2ff5630f57757af93047cc3b.jpg

转载于:https://my.oschina.net/jamesview/blog/1840846

weixin_33889245
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue异步加载组件
qq_42511085的博客
04-02 412
当项目资源内容很多时，我们通常都会选择去异步加载某些组件，使项目以最快的速度启动完成。 何为异步加载，通俗点说就是当需要使用某些组件时，再去加载它，也称为按需加载。 1. webpack代码分割 第一个参数是依赖，resolve是成功之后的一个回调函数，成功后require会先引入依赖，然后执行回调函数。 components{ "v-test":(resolve,reject)=>{...
vue 如何处理两个组件异步问题_在Vue项目上使用异步加载
weixin_33305027的博客
01-11 908
在Vue项目上使用异步加载以SPA的方式构建应用，往往会把所有的代码打包到一起，使得单个js日益庞大。所以我们需要思考一些暂时不用的代码是否可以异步加载，而Vue也提供了这样的能力。一、使用异步组件Vue允许以一个工厂函数的方式定义组件，这个工厂函数会收到一个 resolve 回调，这个回调函数会在你从服务器得到组件定义的时候被调用。你也可以调用 reject(reason) 来表示加载失败。这里...
JavaScript模块-加载模块require.js
rockan007的博客
11-02 4331
最近在搞mui架构的手机端，由于手机本身限制，JS加载，数据、文件处理等都会影响app性能，从而影响用户体验。 转载请注明出处 [我的博客]http://www.lostbug.cn 普通JS加载方式的缺点 需要在js加载完成后，界面开始渲染 js间如果存在依赖关系，需按照依赖关系依次加载。如果依赖关系较复杂，代码编写和维护都比较麻烦 so,require.js在广大人民群众的呼声中，
vue | require动态加载图片及遇到的报错
最新发布
weixin_44864257的博客
04-26 1731
2. require不能用纯动态地址，必须要有图片的 路径+名称+后缀。2. 视图加载的时候未拿到数据，可以用v-if判断一下。（require是node用来加载并执行其它文件导出的模块的方法。结果图片无法显示，遇到了以下提示，而且获取图片名字还需要截取。使用require将url转为base64。1. 查看图片路径是否写错。在弹窗用以上操作的时候出现以下报错。1. 把图片数组改为图片名字。
Node.js基础
伏城之外的博客
01-04 1809
目录 Node.js是啥 Node.js和浏览器有啥联系和区别 Node.js的三大核心 Node.js的模块化规范（commonJS） Node.js的软件包管理（npm） Node.js的异步编程（异步编程方案+Event Loop） Node.js是啥 Node.js 并不是一个 js 文件或者 js 库。 Node.js 是一个JavaScript代码运行环境，它的底层使用了Chrom v8 引擎，所以支持ECMAScript的语法。 Node.js和浏览器有啥联系和区别
Vue动态加载组件的两类方式（import和require）
热门推荐
凡江林的博客
01-30 1万+
1. 需求描述 最近开发的一个项目，涉及到这样一个需求：随着项目的不断推进，后台管理功能逐渐增多，与此同时，静态路由表也逐渐扩大，需要把静态路由方式转换为动态路由方式。要完成这样一个转换，有几个技术要点需要解决，其中一个就是需要Vue动态加载组件，那么，Vue动态加载组件的常用方式有哪些呢？ 2. Vue动态加载组件的两类方式 Vue加载组件主要有正常加载和懒加载，示例代码如下： //正常加载 import index from '../pages/index.vue' import view from '
vue+webpack实现异步组件加载的方法
08-28
* 需要在Vue组件中使用`components`选项来定义异步组件。 * 需要注意异步组件加载的顺序，以避免加载顺序错误。 使用Vue和Webpack实现异步组件加载可以有效地减少初始加载时间，提高用户体验。这项技术需要正确地...
vue实现按需加载组件及异步组件功能
10-16
具体而言，使用了require函数来实现组件的动态引入，这里的require是一个工厂函数，它接受一个回调函数，在组件需要时才被调用，从而实现异步加载。 在script部分，我们可以看到如何在Vue实例中定义data来存储当前...
Vue动态加载异步组件的方法
12-10
背景： 目前我们项目都是按组件划分的，然后各个组件之间封装成产品。目前都是采用iframe直接嵌套页面。...目前采用Vue动态加载异步组件的方式来实现小组件之间的通信。当然门户也要提供一个通信的基线：Vu
requirejs加载vue
04-10
解决requirejs加载vue问题； 解决Vue解析模板闪烁问题； 其它坑
require.js 加载 vue组件 r.js 合并压缩的实例
10-21
它使用依赖和异步加载的方式来控制脚本的执行顺序，特别适合用于模块化的开发。Require.js通过一个配置对象（通常命名为`require.config`）来配置模块加载的路径和别名。 #### r.js 合并压缩工具 r.js是Require.js...
Vue异步组件处理路由组件加载状态的解决方案
10-18
总结起来，Vue 的异步组件和路由懒加载虽然能优化性能，但也可能导致用户界面在组件加载期间无响应。通过创建一个处理异步加载状态的函数，我们可以提供更好的用户体验，显示加载指示器和错误提示，使用户了解当前...
Vue异步组件使用详解
08-30
直接在`components`对象中定义一个函数，这个函数内部包含`require`来加载异步组件，同样可以达到异步加载的效果。 6. **异步组件的优势** - **按需加载**：只有当组件需要被渲染时，其对应的代码才会被加载，...
解析vue路由异步组件和懒加载案例
12-02
Vue.js 是一款流行的前端框架，它的路由管理和组件化特性使得构建单页应用(SPA)变得更加简单。在大型项目中，为了提高应用的加载速度和用户体验，我们常常会使用到异步组件和懒加载策略。本篇文章将深入解析Vue路由...
webpack4使用require中加载异步组件
u012334071的专栏
11-15 2483
webpack4使用require中加载异步组件背景方案一：使用component组件+require.context实现方案二：使用component组件+require('modulePath'，callback）实现其他 背景 我们开发的系统是提供给集团中其他项目组使用的，提供了一些管理信息系统中常用的功能，其他项目组在此基础上做二次开发，添加业务相关的其他功能模块。之前并没有完全采用前后端分离的形式开发，现在为了支持前后端分离，需要使用vue+elementui+webpack4再单独提供一套前端系
vue 组件异步加载（按需加载）
朽木·露琪亚
11-05 1万+
有时候打包出来的js文件过大，严重影响访问速度，这个时候我们就不得不考虑相关方法来提速，毕竟这可是会影响浏览量的。 如果只是针对这个问题的话，我们可以考虑以下两方面： nignx开启gzip、缓存。 文件再次拆分-异步加载 下面就主要说以下vue组件异步加载的方法：（测试所用的webpack：^4.12.0） 1.使用() => import() 代码： 打包： 界面效果： 2.使...
Vue里require('../config') 如何加载index.js
你我青春时
05-30 1万+
 1. 前言  最近在学习Vue，直接用vue-cli构建项目后，在 webpack-base-conf.js 里有 var config = require('../config') 这段代码，执行中实际是 var config = require('../config/index.js') , 参考了阮大大的文章：传送门 终于明白如何加载的。（只想明白require用法直接看下面即可） 2.r...
vue自动加载模块方法require.context
qq_43378240的博客
04-24 1560
大家在写vue路由的时候，一般会采取什么样的方法呢？在router的index.js中直接把路由写完，还是把每个页面抽出来再到router的index.js里引入？ 两种好像都停麻烦，第一种页面多了都聚合在一个js文件里，不利于管理。第二种虽然抽离了每个页面的路由，但是每个都要在router中import，页面多了，就会麻烦。 node.js里面的一种方法可以很好应用在路由以及其他加载模块的需求上，require.context() 这是我的路由文件结构 其中文件夹里的indexs.js是对
路由懒加载 require异步加载例子
04-01
以下是一个使用路由懒加载和require异步加载的例子： ```javascript // 在路由中使用懒加载 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const router = new Router({ routes: [ { path: '/home', name: 'home', component: () => import('./views/Home.vue') //使用懒加载 }, { path: '/about', name: 'about', component: () => import('./views/About.vue') //使用懒加载 } ] }) export default router ``` ```javascript // 使用require异步加载 function loadComponent (name) { return () => require(`./components/${name}.vue`) } const router = new VueRouter({ routes: [ { path: '/home', component: loadComponent('Home') }, { path: '/about', component: loadComponent('About') } ] }) ``` 以上例子中，我们使用了路由懒加载来异步加载组件，这样可以在需要时再加载，从而提高应用程序的性能。同时，我们还使用了require异步加载来动态加载组件。这是一个非常有用的技术，因为它可以让我们仅在需要时加载组件，从而提高应用程序的响应速度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值