Everyone knows that loading the required components only when used can effectively improve the speed of loading the page for the first time. For example, when switching routes, the following article mainly introduces you to the relevant information on how to implement a simple Vue asynchronous component. The article introduces it in detail through sample code. Friends who need it can refer to it.
Preface
In large applications, we may need to split the application into multiple small modules and download them from the server on demand. To simplify things even further, Vue.js allows you to define a component as a factory function that resolves the component definition asynchronously. Vue.js only triggers the factory function when the component needs to be rendered, and caches the results for subsequent re-rendering.
Why asynchronous components are needed? The reason is the same as webpack's on-demand loading. If all components are loaded at the beginning, it will be more time-consuming, so we can define some components as asynchronous components. Load it when needed.
So the benefits are obvious:
Loading on demand can save the time of first loading, increase the speed, and is also a performance optimization. .
Then a component may be used multiple times. If it is loaded on demand, it will not be loaded multiple times. It will be cached after the first load is completed, which is the same as webpack, so Don’t worry
When I was reading the Vue documentation recently, I took a closer look at the asynchronous component part. The first time I read it, I was confused. The second time I read it, I was still a little confused. The third time I read it, I was a little confused. I got a feel for it, and I felt it was clearer the fourth time, so I recorded it. The following is a simple Vue asynchronous component Demo I wrote.
Example code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<title>Document</title>
<script>
// 如果浏览器不支持Promise就加载promise-polyfill
if ( typeof Promise === 'undefined' ) {
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = 'https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js';
document.head.appendChild( script );
}
</script>
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<p id="app" style="font-size: 22px">
<!-- 异步组件async-comp -->
<async-comp :list="['我是一个异步组件，','如果加载完成，','我就会在这里显示']"></async-comp>
</p>
<!-- 引入main.js -->
<script src="/main.js"></script>
</body>
</html>Asynchronous component Async-Comp.js,
Note, Async-Comp.js is not referenced in index.html, but is dynamically loaded in main.js below.
window.async_comp = {
template: '\
<ol>\
<li v-for="item in list">{{ item }}</li>\
</ol>',
props: {
list: Array
}
};main.js
var vm = new Vue( {
el: '#app',
components: {
/* 异步组件async-comp */
'async-comp': function () {
return {
/** 要渲染的异步组件，必须是一个Promise对象 */
component: new Promise( function ( resolve, reject ) {
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = '/Async-Comp.js';
document.head.appendChild( script );
script.onerror = function () {
reject( 'load failed!' );
}
script.onload = function () {
if ( typeof async_comp !== 'undefined' )
resolve( async_comp );
else reject( 'load failed!' )
}
} ),
/* 加载过程中显示的组件 */
loading: {
template: '<p>loading...</p>'
},
/* 出现错误时显示的组件 */
error: {
template: '\
<p style="color:red;">load failed!</p>\
'
},
/* loading组件的延迟时间 */
delay: 10,
/* 最长等待时间，如果超过此时间，将显示error组件。 */
timeout:3200
}
}
}
} )The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
How to implement positioning navigation using jquery
How to implement left and right carousel switching in jquery
How to achieve floor scrolling effect using jquery
How to get data and assign it to the page in jQuery
In three How to implement 3D model display in .js
The above is the detailed content of There are examples of asynchronous components in Vue. For more information, please follow other related articles on the PHP Chinese website!
vue2与vue3中的生命周期执行顺序有什么区别May 16, 2023 pm 09:40 PMvue2与vue3中生命周期执行顺序区别生命周期比较vue2中执行顺序beforeCreate=>created=>beforeMount=>mounted=>beforeUpdate=>updated=>beforeDestroy=>destroyedvue3中执行顺序setup=>onBeforeMount=>onMounted=>onBeforeUpdate=>onUpdated=>onBeforeUnmount=&g
快速搞懂Vue2 diff算法（图文详解）Mar 17, 2023 pm 08:23 PMdiff算法是一种通过同层的树节点进行比较的高效算法，避免了对树进行逐层搜索遍历。那么大家对diff算法吗有多少了解？下面本篇文章就来带大家深入解析下vue2的diff算法，希望对大家有所帮助！
VUE3开发基础：异步组件的使用教程Jun 15, 2023 pm 11:33 PMVue3是Vue.js最新的主要版本，与Vue2相比有许多新的功能和改进。其中一个最突出的改进之一是异步组件的使用。在本文中，我们将深入探讨Vue3中异步组件的使用方法和技巧。什么是异步组件?在Vue中，组件可以通过import语句或require函数引入。这些组件被称为同步组件，它们的代码在应用程序启动时被立即加载并编译。但是，当应用程序变得越来越大
vue为啥要使用异步组件Dec 13, 2022 pm 07:11 PM使用异步组件的原因：1、异步组件可以减少打包的结果，会将异步组件分开打包，会采用异步的方式加载组件，可以有效的解决一个组件过大的问题。2、异步组件的核心可以给组件定义变成一个函数，函数里面可以用import语法，实现文件的分割加载。
如何使用Vue的异步组件和Webpack Code Splitting提升应用性能Jul 17, 2023 pm 09:21 PM如何使用Vue的异步组件和WebpackCodeSplitting提升应用性能引言：随着Web应用越来越复杂，页面加载速度和性能成为了开发者关注的焦点。为了提高应用的性能，我们可以利用Vue的异步组件和Webpack的CodeSplitting功能。这两个功能结合起来可以帮助我们减少页面加载时间，提升用户体验。本文将介绍如何使用Vue的异步组件和Web
如何通过Vue的异步组件和Webpack的Lazy Loading提升应用性能Jul 18, 2023 pm 04:42 PM如何通过Vue的异步组件和Webpack的LazyLoading提升应用性能随着互联网技术的发展，Web应用程序的性能优化一直是开发者关注的重点。在过去，针对Web应用的性能优化主要集中在前端资源的减小和后端接口的优化上。然而，随着Vue.js的流行，通过异步组件和Webpack的LazyLoading可以进一步提升应用性能。Vue是一个轻量级的Java
vue中异步组件和动态组件的区别是什么Aug 26, 2022 pm 06:32 PM区别：1、动态组件是Vue中一个特殊的Html元素“<component>”，它拥有一个特殊的is属性，属性值可以是“已注册组件的名称”或“一个组件的选项对象”；而异步组件不是实物，是一个概念，一个可以让组件异步加载的方式。2、动态组件用于不同组件之间进行动态切换；而异步组件用于性能优化，比如减小首屏加载时间、加载资源大小。
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Dreamweaver CS6
Visual web development tools
WebStorm Mac version
Useful JavaScript development tools
Notepad++7.3.1
Easy-to-use and free code editor
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
Atom editor mac version download
The most popular open source editor
