在一些项目中，有些组件是不要在第一次进入首屏时加载，而是当进行某些操作，才会加载进来，所以此时，我们可以将该组件设置为异步加载，神马时候用，神马时候在加载进来，已达到提升首屏性能的目的**

异步组件的使用方法

此处使用的是webpack的懒加载方法

  1. components: {
  2.   AsyncCmp: () => import ('url');
  3. }

如果需要将多个文件同时异步加载出来时合并到一个文件中

  1. components: {
  2.   AsyncCmp1: () => import(/* webpackChunkName: "async" */ 'url'),
  3.   AsyncCmp2: () => import(/* webpackChunkName: "async" */ 'url'),
  4. }

/* webpackChunkName: "async" */ 将文件合并到asynv中 因为上面的代码中两个名字都是async故会合并到一个文件当中去

示例

组件一的代码

  1. <template>
  2.     <div>我是异步插件</div>
  3. </template>

组件二的代码

  1. <template>
  2.     <div>我是异步插件2</div>
  3. </template>

app.vue的源码

  1. <template>
  2.   <div id="app">
  3.       <button @click="show=true">click</button>
  4.       <base-demo v-if="show"></base-demo>
  5.       <base-demo1 v-if="show"></base-demo1>
  6.   </div>
  7. </template>
  9. <script>
  11. // import baseDemo from './components/baseDemo'
  12. export default {
  13.   name: 'App',
  14.   components: {
  15.     // 异步组件加载 ，将两个组件合并到一个文件中 文件名为async
  16.     baseDemo:()=>import(/* webpackChunkName: "async" */'./components/baseDemo'),
  17.     baseDemo1:()=>import(/* webpackChunkName: "async" */'./components/baseDemo1')
  18.   },
  19.   data(){
  20.     return{
  21.       show:false,
  22.     }
  23.   }
  24. }
  25. </script>
  27. <style>
  28. #app {
  29.   font-family: Avenir, Helvetica, Arial, sans-serif;
  30.   -webkit-font-smoothing: antialiased;
  31.   -moz-osx-font-smoothing: grayscale;
  32.   text-align: center;
  33.   color: #2c3e50;
  34.   margin-top: 60px;
  35. }
  36. </style>

其他知识点prefech与preload 的区别

异步加载的文件，会在link标签上设置 el=”prefech”。浏览器会在空闲时间内下载对应的资源，使用时可以直接从缓存中获取。与之对应的 el=”preload”，会及时下载对应的资源。
image.png