编程知识 cdmana.com

Vue asynchronous component?

1. What are asynchronous components :

image.png

2. The use of asynchronous components :

Child components :

<template>
  <div class="asyncCmp">
     A component that doesn't need to be loaded in the first screen .
  </div>
</template>

Parent component :

<template>
  <div id="app">
    <AsyncCmp />
  </div>
</template>

<script>
import AsyncCmp from './components/async-cmp'

export default {
  components: {
    AsyncCmp,
  }
}
</script>

Look at the effect :
image.png
Now use a button to control the loading of the component :

<template>
  <div id="app">
    <button @click="show = !show">click</button>
    <AsyncCmp v-if="show" />
  </div>
</template>

<script>
import AsyncCmp from './components/async-cmp'

export default {
  components: {
    AsyncCmp,
  },
  data () {
    return {
      show: false,
    }
  }
}
</script>

See the effect :
image
Although the initial state does not show the component , But in fact webpack The component has been packaged and loaded in the parent component .
image.png
stay app.js You can find it in :
image.png
Because we don't need to load this component before we click the button , So continue to transform :

<template>
  <div id="app">
    <button @click="show = !show">click</button>
    <AsyncCmp v-if="show" />
  </div>
</template>

<script>
// import AsyncCmp from './components/async-cmp'

export default {
  components: {
    // AsyncCmp,
    AsyncCmp: () => import('./components/async-cmp'),
  },
  data () {
    return {
      show: false,
    }
  }
}
</script>

You can see , The component is not loaded into app.js in :
image.png
effect :
image
After loading, a new one will be generated js file :
image.png
What happens if you load multiple components in this way :

Child components :

<template>
  <div class="asyncCmp">
     Another component that doesn't need to be loaded in the first screen .
  </div>
</template>

Parent component :

<template>
  <div id="app">
    <button @click="show = !show">click</button>
    <AsyncCmp v-if="show" />
    <AsyncCmp1 v-if="show" />
  </div>
</template>

<script>
export default {
  components: {
    AsyncCmp: () => import('./components/async-cmp'),
    AsyncCmp1: () => import('./components/async-cmp1'),
  },
  data () {
    return {
      show: false,
    }
  }
}
</script>

effect :
image
You can see , After loading, two new js file , If there are many files to load , Then it will generate the corresponding number of js file :
image.png
To reduce the amount of js Number of documents , We can combine these concurrent asynchronous components into one js The file of :

<template>
  <div id="app">
    <button @click="show = !show">click</button>
    <AsyncCmp v-if="show" />
    <AsyncCmp1 v-if="show" />
  </div>
</template>

<script>
export default {
  components: {
    AsyncCmp: () => import(/* webpackChunkName: "asyncCmp" */ './components/async-cmp'),
    AsyncCmp1: () => import(/* webpackChunkName: "asyncCmp" */ './components/async-cmp1'),
  },
  data () {
    return {
      show: false,
    }
  }
}
</script>

When loading asynchronous components, the comments are packaged into the same file , The effect is as follows :
image

summary :

Asynchronous components can be understood as components loaded on demand , When do I need to show it before loading it , Instead of loading everything the first time you enter the page , This operation can greatly reduce the consumption of performance , Improve user experience .

版权声明
本文为[Coder_ WangYu]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201225132615653k.html

Scroll to Top