Vue improves page response speed through lazy loading

Overview

The purpose of the project is to analyze the company's operating data through pivot tables and Excel formulas. However, after integration, the page runs smoothly in the development environment, and large amounts of data are loaded and processed quickly. However, after the release, every time the user opens the page, the loading time is reduced compared to the development stage. After investigation, it is found that the slower speed is caused by the increase in the size of vendor.js in the release package. It takes about 300 milliseconds to load this file each time. Since the small Vue project does not have module division, all the code is directly packaged into the vendor. After integrating the new functions, the release package also becomes larger.

Now that we have found the cause, we start to optimize it. When the front end needs to load large resources, lazy loading is generally used to optimize efficiency.

What is lazy loading?

Lazy loading is also called delayed loading. When a web page responds, resources are not requested immediately. Resources are loaded when the page is loaded or when it is responded to on demand, so as to improve the page response speed and save server resources. The most commonly used lazy loading in web pages is lazy loading of images. For multi-image pages like Taobao, if you wait until all images are downloaded before responding to the request, it will not necessarily cause page loading jams. The same is true for the loading of JS resources. The loading of large JS will cause JS blocking and the page will stop responding and appear in a pseudo-dead state. Therefore, the loading speed of the first screen of the page can be improved by loading on demand.

Having summarized the specific optimization steps, let’s start optimizing!

Start Optimizing

First, the project environment: Vue 2.6

Development environment: Vue-cli 4.5 + TypeScript 3.9

Divide business modules

By asynchronously loading modules through routing, the loading speed of the first screen and other pages can be accelerated. The webExcel module is configured as lazy loading mode in Vue Router. After configuration, the webExcel component will be packaged into a separate file according to the specified webpackChunkName and will be loaded only when the webExcel route is accessed. In this way, webExcel resources will not be loaded when accessing the home and about pages.

Lazy loading route configuration

The access pages are packaged and released, the first screen opens in seconds, and it also opens in seconds when you directly access about. However, when checking the network requests, it was found that about and web Excel resources were requested when accessing the home page. After investigation, it was found that vue-cli used the preload and prefetch preloading mechanisms in the page, which preloaded the resources required for subsequent pages without affecting the loading of the current page to improve the user experience. Here, the prefetch resources are commented out for clear demonstration.

(temporarily disable prefetch preloading)

After enabling lazy loading of routes, about and webExcel are not loaded on the home page.

(Home network request)

Clear the network request record, click Web Excel, and access the webExcel page. At this time, the webExcel resource will be requested and the component will be displayed.

(webExcel page network request)

Online Excel component lazy loading

Further optimize the speed of opening pages using plugins

Optimized route loading. To improve user experience, further optimized the webExcel page, enabled lazy loading of components, and loaded the Designer component only when it was needed.

The way to enable asynchronous components is similar to routing. You can directly configure the import component to replace the original static import.

(Component lazy loading)

Here we use the AsyncComponent configuration in one step, so that the user can be prompted when the component is loading.

(Page Template)

(Asynchronous component lazy loading)

The displayDesigner property is used on the page to control whether the Designer component is displayed. After setTimeout of 3 seconds, the Designer component starts to be loaded and displayed. LoadingComponent displays the loading state while loading.

It can be seen from the network request that webExcel starts to request designer resources 3 seconds after loading. LoadingComponent is displayed during the request, and Designer component is displayed after the request is completed.

Enable gzip compression to speed up resource requests

In order to further speed up resource requests, you can enable server gizp compression. Currently, most browsers support gzip. You can enable the server's gzip function and the server will compress resources before transmitting them.

The following content will appear in the network request Request, indicating that gzip is supported

Accept-Encoding: gzip, deflate, br

Vue-cli can gzip-pack the resources in advance when packaging, so that the server directly returns the packaged resources without the need to package them again. By using the compression-webpack-plugin plug-in, you can directly generate gz compressed files when bundling. The configuration of gzip can be set according to the specific deployment situation.

Summarize

After the above optimization, the first screen loading resources only require Vue basic components and Home page components, and the first screen loading speed returns to the original 200 milliseconds. Other pages that do not use the Designer component do not need to load resources. At the same time, the Designer component is loaded once, and other subsequent pages that use the component do not need to load it again

The above are some configurations about Vue routing and component lazy loading, but lazy loading is not a panacea. You still have to decide whether to use it based on actual needs.

The above is the details of how Vue improves page response speed through lazy loading. For more information about how Vue lazy loading improves response speed, please pay attention to other related articles on 123WORDPRESS.COM!