webpack的代碼分包

默認的打包過程：

• 默認情況下，在構(gòu)建整個組件樹的過程中，因為組件和組件之間是通過模塊化直接依賴的，那么webpack在打包時就會將組件模塊打包到一起（比如一個app.js文件中）；
• 這個時候隨著項目的不斷龐大，app.js文件的內(nèi)容過大，會造成首屏的渲染速度變慢；

打包時，代碼的分包：

• 所以，對于一些不需要立即使用的組件，我們可以單獨對它們進行拆分，拆分成一些小的代碼塊chunk.js；
• 這些chunk.js會在需要時從服務(wù)器加載下來，并且運行代碼，顯示對應(yīng)的內(nèi)容；

那么webpack中如何可以對代碼進行分包呢？

使用import函數(shù)加載模塊，是異步加載；
import函數(shù)返回一個promise

import {
  createApp
} from 'vue'
import App from './10_異步組件/App.vue'

//異步加載模塊
import("./utils/math").then(({sum}) => {
  console.log(sum(20, 30));
})

createApp(App).mount('#app')

src/utils/math.js

export function sum(a, b) {
  return  a + b
}

webpack在打包的時候，對于異步加載的模塊，會進行分包，把其單獨的打包到一個文件中

image.png

Vue中實現(xiàn)異步組件

如果我們的項目過大了，對于某些組件我們希望通過異步的方式來進行加載（目的是可以對其進行分包處理），那么Vue中給我們提供了一個函數(shù)：defineAsyncComponent。
defineAsyncComponent函數(shù)調(diào)用返回一個異步組件

defineAsyncComponent接受兩種類型的參數(shù)：

• 類型一：工廠函數(shù)，該工廠函數(shù)需要返回一個Promise對象；
• 類型二：接受一個對象類型，對異步函數(shù)進行配置；

工廠函數(shù)類型一的寫法：

<template>
  <div>
    <!--3.使用異步組件-->
     <async-about></async-about>
  </div>
</template>

<script>
import { defineAsyncComponent } from "vue";
//1.創(chuàng)建異步組件
const AsyncAbout = defineAsyncComponent(() => import("./AsyncAbout.vue"));
export default {
  components: {
    AsyncAbout, //2.注冊異步組件
  },
};
</script>

<style scoped></style>

接受一個對象類型類型二寫法

<template>
  <div>
    <!--3.使用異步組件-->
     <async-about></async-about>
  </div>
</template>

<script>
import { defineAsyncComponent } from "vue";
import Loading from "./Loading.vue";
import Error from "./Error.vue";
//1.創(chuàng)建異步組件
const AsyncAbout = defineAsyncComponent({
  loader: () => import("./AsyncAbout.vue"), //loder的值為一個工程函數(shù)，返回一個promise
  loadingComponent: Loading, //加載過程中顯示的占位組件 占位組件不需要注冊
  errorComponent: Error, //加載失敗顯示的占位組件
  delay: 2000, //在顯示loadingComponent組件之前的延遲 | 默認值：200（單位ms）
  timeout: 5000, //加載組件的時間超過了設(shè)定值，將顯示錯誤組件 | 默認值 Inifinity(即永不超時), 單位ms
  onError(err, retry, fail, attemps) {//監(jiān)聽錯誤事件
    console.log(err) //錯誤信息
    //retry 調(diào)用此函數(shù)代表嘗試重新加載組件
    cnsole.log(attemps) //嘗試重新加載的次數(shù)，超過次數(shù)不再加載
    //fail 調(diào)用此函數(shù)，代表加載失敗，不再嘗試加載了
    if(attempts <= 3) {
        retry()
    }else {
        fail()
    }
  }
});
export default {
  components: {
    AsyncAbout, //2.注冊異步組件
  },
};
</script>

<style scoped></style>

異步組件和Suspense

注意：目前（2021-06-08）Suspense顯示的是一個實驗性的特性，API隨時可能會修改。

Suspense是一個內(nèi)置的全局組件，該組件有兩個插槽：

• default：如果default可以顯示，那么顯示default的內(nèi)容；
• fallback：如果default無法顯示，那么會顯示fallback插槽的內(nèi)容；

<template>
  <div>
    <suspense>
      <template #default>
        <!--3.使用異步組件-->
       <async-about></async-about>
      </template>
      <template #fallback>
        <loading></loading>
      </template>
    </suspense>
    
  </div>
</template>

<script>
import { defineAsyncComponent } from "vue";
//1.創(chuàng)建異步組件
const AsyncAbout = defineAsyncComponent(() => import("./AsyncAbout.vue"));
import Loading from "./Loading.vue";
export default {
  components: {
    AsyncAbout, //2.注冊異步組件
    Loading
  },
};
</script>

<style scoped></style>

異步組件的使用場景

如果動態(tài)渲染的組件為同步加載的組件，webpack打包的時候，會把這些同步加載的組件，都打包到app.js中，app.js文件過大，會影響首屏加載速度
使動態(tài)渲染的組件為異步組件，webpack打包的時候，會把各個異步組件單獨打包一個文件，那些組件不會被打包到app.js中

<template>
  <div>
    <button v-for="item in list" :key="item" 
      :class="{active: curItem === item}" 
      @click="btnClick(item)">{{item}}</button>

    <keep-alive include="async-about">
      <component name="why" :age="18" :is="curItem"
        @pageClick="pageClick"></component>
    </keep-alive>

  </div>
</template>

<script>
  import { defineAsyncComponent } from "vue";
  const AsyncAbout = defineAsyncComponent(() => import('./pages/About.vue')) 
  const AsyncHome = defineAsyncComponent(() => import('./pages/Home.vue'))
  const AsyncCategory = defineAsyncComponent(() => import('./pages/Category.vue'))

  export default {
    components: {
      AsyncAbout,
      AsyncHome,
      AsyncCategory
    },
    data() {
      return {
        list: ['async-home', 'async-about', 'async-category'],
        curItem: 'home'
      }
    },
    methods: {
      btnClick(item) {
        this.curItem = item
      },
      pageClick() {
        console.log('頁面被點擊')
      }
    }
  }
</script>

<style scoped>
  .active {
    color: red
  }
</style>

此文檔主要內(nèi)容來源于王紅元老師的vue3+ts視頻教程