When a page is too large and references too many components, or you want to optimize the loading speed of the next page, you can consider changing the one-time import of components to dynamic import on demand.

1. Components are introduced to the page but not loaded

const lazyChangeGeographicLocation = () => import('@/components/addrChooseList/components/change-geographic-location.vue')
Copy the code

2. V-if hides components by default and does not render for the first time

  <lazy-change-geographic-location v-if='showChooseLoaction' :isShowBack="true" @onHide="onHide" @closeAndBack="closeAndBack" @handleLocation="handleGeoLocation" />
Copy the code

3. Perform the method defined in the first step when the component needs to be loaded and rendered, controlling the display properties of the component in the callback

  data () {
    return {
      showChooseLoaction: false,
      addrLoad: false  // Load state, which controls whether components are loaded or not, set to true in advance when rendering components is required}},Copy the code
   otherLocationOption() {
      if (!this.addrLoad) {
        lazyChangeGeographicLocation().then(() => {
          this.addrLoad = true;
          this.addrListShow = false
          this.showChooseLoaction = true
        })
        return;
      }
      this.addrListShow = false
      this.showChooseLoaction = true
    },
Copy the code

When the first rendering is successful, there is no need to hide it with V-if and keep it in memory all the time