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