Asynchronous components for Vue performance optimization

In Vue, if a component is very large (such as some complex form), then it will slow down the performance of the entire application. Therefore, when developing Vue applications, we need to consider how to load components on demand in order to improve the performance of the application.

Vue provides the functionality of asynchronous components, allowing us to split components into small pieces and load them dynamically when needed. The working principle of asynchronous components is: before the component is rendered, first package the code required by the component into a small block, and then dynamically load the small block when the component needs to be used.

1. Definition of asynchronous components

In Vue.js, if you want to define an asynchronous component, you need to use the webpackprovided import()method. import()Methods allow us to dynamically load code at runtime. The following is a basic asynchronous component definition:

Vue.component('MyComponent', () => import('./MyComponent.vue'));

Note: The definition of an asynchronous component must be a function that returns an Promiseobject.

2. Use of asynchronous components

When using asynchronous components, you only need to write them like ordinary components. When the component is rendered, Vue.js will automatically detect that the component is an asynchronous component and load it dynamically. The following is a basic asynchronous component usage:

<template>
  <div>
    <MyComponent />
  </div>
</template>

<script>
export default {
  components: {
    MyComponent: () => import('./MyComponent.vue')
  }
}
</script>

3. Blocking

If an application contains multiple asynchronous components, we can package them into different small pieces to improve application performance. In Webpack, through webpackChunkNameannotations, async modules can be given a name so that they are packaged into a single file. For example:

Vue.component('MyComponent', () => import(/* webpackChunkName: "my-component" */ './MyComponent.vue'));

4. Skeleton screen

For some relatively large components, even if asynchronous components are used for on-demand loading, there will still be a blank period when the components are loaded, which will bring a bad experience to users.

At this time, the skeleton screen technology can be used to render a placeholder in advance to tell the user that the content to be loaded is being loaded. The following is a basic skeleton screen usage:

<template>
  <div>
    <template v-if="isLoading">
      <!-- 骨架屏代码 -->
    </template>
    <template v-else>
      <!-- 实际内容代码 -->
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true
    }
  },
  mounted() {
    import('./MyComponent.vue').then(() => {
      this.isLoading = false
    })
  }
}
</script>

In the above sample code, when it isLoadingis true, the code of the skeleton screen is displayed; when it isLoadingis false, the code of the actual content is displayed.

5. The principle of on-demand loading

In Webpack, on-demand loading of asynchronous components relies on methods and functionality import()provided by Webpack . Code SplittingWhen a component is defined as an asynchronous component, Webpack will package the component separately into a file and use the import()method to dynamically load it at runtime. Since the component packaged by webpack is a JavaScript modular file, it can also be optimized in details, such as adopting the tree shaking mechanism and using CDN to accelerate, etc.

Summarize

Vue asynchronous components are a very useful means of performance optimization, especially for large single-page applications (SPA). By configuring asynchronous components and skeleton screens in Webpack, we can significantly improve the performance and user experience of the application.