关于前端: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>

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

总结:

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

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据