Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge of "what is vue component code segmentation and lazy loading". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

In front-end development, as business and pages increase, the number of components increases rapidly in a component-based structure, and we obviously want to do some work in order to optimize:

Code block

Lazy loading of non-essential resource files

Non-essential resources refer to unnecessary resources that render a page for the first time, such as pictures, pop-up windows, etc., that appear as a result of user actions.

Code fragmentation and lazy loading play a great role in optimization at the page level. Users are likely to just browse the dashboard page, and may not look at the details page at all, so we do not have to mix the code of the details page with the code of the dashboard page. When users look at a page, they can only load the corresponding resources of that page, which can greatly enhance the user experience.

This article is above @ vue/cli 3.

Lazy loading component

In general, the process of using a component in Vue is roughly as follows:

/ / Home.vueimport HelloWorld from'@ / components/HelloWorld.vue'export default {components: {HelloWorld,},}

This is the way we are most familiar. When we visit Home.vue, Webpack assures us that HelloWorld.vue must exist, which is determined by dependencies (Home.vue depends on HelloWorld.vue).

That's normal, right, but what if HelloWorld.vue is a non-essential resource, such as a pop-up window that requires a user to click a button or a default hidden content that appears only when certain conditions are triggered? If this is the case, it is obvious that there is no need to request HelloWorld.vue immediately when we visit Home.vue, and the configuration method is extremely simple:

Hello / / Home.vueexport default {components: {HelloWorld: () = > import ('@ / components/HelloWorld.vue'), / / A}, data () {return {showHello: false,}},}

As simple as line A, you can kill two birds with one stone: HelloWorld.vue is packaged as a separate js file, and this separate js file is requested only when we click the button, which reduces the size of the main code block.

A brief analysis: import () returns a component Promise, which is now understood by almost all packaging tools and triggers code fragmentation for Webpack (after Webpack 2).

Note: Vue does not care about a component until it is rendered. In the above example, HelloWorld.vue makes sense only when we trigger the button.

Even if all components can be configured for lazy loading, don't abuse it. In most cases, lazy loading can only be configured for non-essential resources. As in the example above, if HelloWorld.vue exists all the time in Home.vue, configuring lazy loading may be counterproductive. After loading the js file corresponding to Home.vue, the corresponding js file of HelloWorld.vue will be requested immediately. If the js file corresponding to HelloWorld.vue is relatively small, The benefits may not be enough to offset the consumption of an http request.

Problems and solutions

Although lazy loading of components has many advantages, it still has some defects. For example, after clicking the button in the above example, you have to wait for the js file corresponding to HelloWorld.vue to be requested before the page will make corresponding changes. This involves the handling of loading status and error status (although there is no problem in general, because they are all small files and load very fast, but there are exceptions). Fortunately, Vue also takes these into account for us:

Loading component / / Home.vueimport LoadingComponent from'@ / components/Loading'export default {components: {HelloWorld: () = > ({component: import ('@ / components/HelloWorld.vue'), loading: LoadingComponent, / / load HelloWorld.vue corresponding to the js file showing delay: 300, / / loading delay effective time}),}, data () {return {showHello: false }},}

In terms of user experience, generally speaking, the response time in 500ms will not lose users' attention, so you can configure a delay time for loading. By default, loading will not appear after loading in 200ms. Of course, you can also manually set delay (unit ms) as above.

Error handling component / / Home.vueimport ErrorComponent from'@ / components/Error'export default {components: {HelloWorld: () > ({component: import ('@ / components/HelloWorld.vue'), error: ErrorComponent, / / display when loading js file corresponding to HelloWorld.vue fails. If the file does not exist timeout: 2000, / / the file loading timeout is not completed. Will trigger ErrorComponent}),}, data () {return {showHello: false,}},}

The main situations where errors occur are as follows:

Network connection is not available / server error

The file does not exist (pay special attention to the fact that the previous version of the file has been deleted and the user has not refreshed the page after redeployment)

Load timeout (there is no timeout by default, but it can be configured through the timeout attribute as above, in ms)

Preload and prefetch

Vue also configures a preload policy for resource files, that is, usage and policy, which can be viewed in the index.html file after build or in the Network panel of the browser in development mode. We will not elaborate on the specific usage of the two, but we will talk about the differences between the two: the priority of preload is higher than that of prefetch, generally speaking, the necessary resources of the current page can use the preload policy, and the non-essential resources of the current page and the resources of other pages use the prefetch policy.

By configuring resource preloading, browsers preload resources for us and respond in time when users use certain resources, which can improve the performance of loading for the first time and provide a good experience for users' subsequent operations at the same time.

Prefetch is not supported in Safari yet, so lazy loading performs relatively poorly in Safari.

This is the end of the content of "what is vue component code fragmentation and lazy loading". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.