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>在加载异步组件的时候正文打包到同一个文件中，成果如下：
总结：
异步组件其实能够了解为按需加载的组件，什么时候须要展现了再去加载，而不是首次进入页面之后就全副都加载，这样操作可能很大水平的缩小性能的耗费，进步用户体验。