【笔记】Vue3的分包

发表于 更新于 分类于 阅读次数：

前言

Vue3的分包学习笔记

同步组件实现Webpack自动分包

main.js
1
2
3
4
5
import App from "./App.vue"

import("./component/Son.vue").then(res => {
  ...
});

异步组件实现Webpack自动分包

App.vue
1
2
3
4
5
6
7
8
9
10
11
<script>
  import { defineAsyncComponent } from "vue"
  
  const AsyncSon = defineAsyncComponent(() => import("./component/Son.vue"));
  
  export default {
    components: {
      Son: AsyncSon
    }
  }
</script>
App.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
  import { defineAsyncComponent } from "vue"
  
  const AsyncSon = defineAsyncComponent({
    loader: () => import("./component/Son.vue"),
    loadingComponent: "Loading...",
    errorComponent: "Error...",
    timeout: 3000,
    delay: 1000,
    suspensible: true
  });
  
  export default {
    components: {
      Son: AsyncSon
    }
  }
</script>

完成