关于前端:Vue异步组件

1. 什么是异步组件：

2. 异步组件的应用：

子组件：

<template>
  <div class="asyncCmp">
    一个不须要在首屏中加载的组件。</div>
</template>

父组件：

<template>
  <div id="app">
    <AsyncCmp />
  </div>
</template>
 
<script>
import AsyncCmp from './components/async-cmp'
 
export default {
  components: {AsyncCmp,}
}
</script>

看看成果：

当初应用一个按钮来管制组件的加载：

<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>

看成果：

尽管初始状态没有展现这个组件，但其实 webpack 曾经将该组件打包并且在父组件中加载进来了。

在 app.js 中可能找到它：

因为咱们在点击按钮前并不需要加载这个组件，所以持续革新：

<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>

能够看到，组件并没有被加载到 app.js 中：

成果：

而在加载后会生成一个新的 js 文件：

如果应用这样的形式加载多个组件会产生什么呢：

子组件：

<template>
  <div class="asyncCmp">
    又一个不须要在首屏中加载的组件。</div>
</template>

父组件：

<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>

成果：

能够看到，加载后会生成两个新的 js 文件，如果须要加载的文件有很多个，那么就会生成对应个数的 js 文件：

为了缩小生成的 js 文件个数，咱们能够将这些同时呈现的异步组件合并到一个 js 文件当中：

<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>

在加载异步组件的时候正文打包到同一个文件中，成果如下：

总结：

异步组件其实能够了解为按需加载的组件，什么时候须要展现了再去加载，而不是首次进入页面之后就全副都加载，这样操作可能很大水平的缩小性能的耗费，进步用户体验。