Home Web Front-end JS Tutorial About Vue code splitting and lazy loading

About Vue code splitting and lazy loading

Dec 18, 2017 pm 01:07 PM
code Split load

Lazy loading is also called delayed loading, which means loading when needed and loading as needed. This article mainly introduces you to the implementation method of Vue code segmentation and lazy loading. The article introduces it in great detail through example code. It has certain reference learning value for everyone's study or work. Friends who need it will follow the editor to learn together. Study it. Hope it helps everyone.

Why lazy loading is needed

In a single-page application, if there is no application lazy loading, the file packaged with webpack will be abnormally large, resulting in too much content to be loaded when entering the homepage. If there are too many, the delay is too long, which is not conducive to the user experience. Using lazy loading can divide the page and load the page when needed, which can effectively share the loading pressure on the homepage and reduce the loading time of the homepage

How to cooperate with webpack to implement lazy loading of components

1. Configure the chunkFilename attribute in the output path in the webpack configuration file

output: {
path: resolve(__dirname, 'dist'),
filename: options.dev ? '[name].js' : '[name].js?[chunkhash]',
chunkFilename: 'chunk[id].js?[chunkhash]',
publicPath: options.dev ? '/assets/' : publicPath
},
Copy after login

The chunkFilename path will be used as the path for lazy loading of components

2. Cooperate with the asynchronous loading method supported by webpack

  • resolve => require([URL], resolve), good support

  • ##( ) => system.import(URL), webpack2 official website has stated that it will be gradually abolished, and is not recommended.

  • () => import(URL), webpack2 official website recommends use, It belongs to the category of es7 and needs to be used with babel's syntax-dynamic-import plug-in. The specific usage method is as follows

npm install --save-dev babel-core babel-loader babel-plugin-syntax-dynamic-import babel-preset-es2015
Copy after login
use: [{
loader: 'babel-loader',
options: {
presets: [['es2015', {modules: false}]],
plugins: ['syntax-dynamic-import']
}
}]
Copy after login
Introduction

In the era of webpack > 2, vue It is easier to do code splitting and lazy loading. No loader or require.ensure is required.


import solves everything.


Split levels


Vue code split lazy loading includes the following levels:


1. Component level split lazy loading


2. Router routing level


3. Vuex module


Component level code splitting

//全局组件
Vue.component('AsyncComponent', () => import('./AsyncComponent'))

//局部注册组件
new Vue({
 // ...
 components: {
 'AsyncComponent': () => import('./AsyncComponent')
 }
})

// 如果不是default导出的模块
new Vue({
 // ...
 components: {
 'AsyncComponent': () => import('./AsyncComponent').then({ AsyncComponent }) => AsyncComponent
 }
})
Copy after login
Routing level code splitting


const AsyncComponent= () => import('./AsyncComponent')

new VueRouter({
 routes: [
 { path: '/test', component: AsyncComponent}
 ]
})
Copy after login
Vuex module code segmentation, there is a dynamic registration module method in vuex, and import

const store = new Vuex.Store()

import('./store/test').then(testModule => {
 store.registerModule('test', testModule)
})
Copy after login
Summary


In general projects, we follow It is sufficient to split at the router and components level (or only use router splitting). Large projects may use all three, but the usage is very simple, right?

Related recommendations:

Steps to implement lazy loading and cross-domain implementation using Js

Introduction to the lazy loading method of images in JavaScript

Lazy loading problem of pictures

The above is the detailed content of About Vue code splitting and lazy loading. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1653
14
PHP Tutorial
1251
29
C# Tutorial
1224
24
How to solve win7 driver code 28 How to solve win7 driver code 28 Dec 30, 2023 pm 11:55 PM

Some users encountered errors when installing the device, prompting error code 28. In fact, this is mainly due to the driver. We only need to solve the problem of win7 driver code 28. Let’s take a look at what should be done. Do it. What to do with win7 driver code 28: First, we need to click on the start menu in the lower left corner of the screen. Then, find and click the "Control Panel" option in the pop-up menu. This option is usually located at or near the bottom of the menu. After clicking, the system will automatically open the control panel interface. In the control panel, we can perform various system settings and management operations. This is the first step in the nostalgia cleaning level, I hope it helps. Then we need to proceed and enter the system and

MobileSAM: A high-performance, lightweight image segmentation model for mobile devices MobileSAM: A high-performance, lightweight image segmentation model for mobile devices Jan 05, 2024 pm 02:50 PM

1. Introduction With the popularization of mobile devices and the improvement of computing power, image segmentation technology has become a research hotspot. MobileSAM (MobileSegmentAnythingModel) is an image segmentation model optimized for mobile devices. It aims to reduce computational complexity and memory usage while maintaining high-quality segmentation results, so as to run efficiently on mobile devices with limited resources. This article will introduce the principles, advantages and application scenarios of MobileSAM in detail. 2. Design ideas of the MobileSAM model. The design ideas of the MobileSAM model mainly include the following aspects: Lightweight model: In order to adapt to the resource limitations of mobile devices, the MobileSAM model adopts a lightweight model.

What to do if the blue screen code 0x0000001 occurs What to do if the blue screen code 0x0000001 occurs Feb 23, 2024 am 08:09 AM

What to do with blue screen code 0x0000001? The blue screen error is a warning mechanism when there is a problem with the computer system or hardware. Code 0x0000001 usually indicates a hardware or driver failure. When users suddenly encounter a blue screen error while using their computer, they may feel panicked and at a loss. Fortunately, most blue screen errors can be troubleshooted and dealt with with a few simple steps. This article will introduce readers to some methods to solve the blue screen error code 0x0000001. First, when encountering a blue screen error, we can try to restart

Error loading plugin in Illustrator [Fixed] Error loading plugin in Illustrator [Fixed] Feb 19, 2024 pm 12:00 PM

When launching Adobe Illustrator, does a message about an error loading the plug-in pop up? Some Illustrator users have encountered this error when opening the application. The message is followed by a list of problematic plugins. This error message indicates that there is a problem with the installed plug-in, but it may also be caused by other reasons such as a damaged Visual C++ DLL file or a damaged preference file. If you encounter this error, we will guide you in this article to fix the problem, so continue reading below. Error loading plug-in in Illustrator If you receive an "Error loading plug-in" error message when trying to launch Adobe Illustrator, you can use the following: As an administrator

The computer frequently blue screens and the code is different every time The computer frequently blue screens and the code is different every time Jan 06, 2024 pm 10:53 PM

The win10 system is a very excellent high-intelligence system. Its powerful intelligence can bring the best user experience to users. Under normal circumstances, users’ win10 system computers will not have any problems! However, it is inevitable that various faults will occur in excellent computers. Recently, friends have been reporting that their win10 systems have encountered frequent blue screens! Today, the editor will bring you solutions to different codes that cause frequent blue screens in Windows 10 computers. Let’s take a look. Solutions to frequent computer blue screens with different codes each time: causes of various fault codes and solution suggestions 1. Cause of 0×000000116 fault: It should be that the graphics card driver is incompatible. Solution: It is recommended to replace the original manufacturer's driver. 2,

Stremio subtitles not working; error loading subtitles Stremio subtitles not working; error loading subtitles Feb 24, 2024 am 09:50 AM

Subtitles not working on Stremio on your Windows PC? Some Stremio users reported that subtitles were not displayed in the videos. Many users reported encountering an error message that said "Error loading subtitles." Here is the full error message that appears with this error: An error occurred while loading subtitles Failed to load subtitles: This could be a problem with the plugin you are using or your network. As the error message says, it could be your internet connection that is causing the error. So please check your network connection and make sure your internet is working properly. Apart from this, there could be other reasons behind this error, including conflicting subtitles add-on, unsupported subtitles for specific video content, and outdated Stremio app. like

GE universal remote codes program on any device GE universal remote codes program on any device Mar 02, 2024 pm 01:58 PM

If you need to program any device remotely, this article will help you. We will share the top GE universal remote codes for programming any device. What is a GE remote control? GEUniversalRemote is a remote control that can be used to control multiple devices such as smart TVs, LG, Vizio, Sony, Blu-ray, DVD, DVR, Roku, AppleTV, streaming media players and more. GEUniversal remote controls come in various models with different features and functions. GEUniversalRemote can control up to four devices. Top Universal Remote Codes to Program on Any Device GE remotes come with a set of codes that allow them to work with different devices. you may

Resolve code 0xc000007b error Resolve code 0xc000007b error Feb 18, 2024 pm 07:34 PM

Termination Code 0xc000007b While using your computer, you sometimes encounter various problems and error codes. Among them, the termination code is the most disturbing, especially the termination code 0xc000007b. This code indicates that an application cannot start properly, causing inconvenience to the user. First, let’s understand the meaning of termination code 0xc000007b. This code is a Windows operating system error code that usually occurs when a 32-bit application tries to run on a 64-bit operating system. It means it should

See all articles