一、是什麼

Tree shaking 是一種透過清除多餘程式碼方式來最佳化專案打包體積的技術，專業術語叫 Dead code elimination

簡單來講，就是在保持程式碼執行結果不變的前提下，去除無用的程式碼

如果把程式碼打包比作製作蛋糕，傳統的方式是把雞蛋（帶殼）全部丟進去攪拌，然後放入烤箱，最後把（沒有用的）蛋殼全部挑選並剔除出去

而treeshaking則是一開始就把有用的蛋白蛋黃（import）放入攪拌，最後直接作出蛋糕

也就是說 ，tree shaking 其實是找出使用的程式碼

在Vue2中，無論我們使用什麼功能，它們最終都會出現在生產程式碼中。主要原因是Vue例項在專案中是單例的，捆綁程式無法檢測到該物件的哪些屬性在程式碼中被使用到

import Vue from 'vue' Vue.nextTick(() => {})

而Vue3原始碼引入tree shaking特性，將全域性 API 進行分塊。如果你不使用其某些功能，它們將不會包含在你的基礎包中

import { nextTick, observable } from 'vue' nextTick(() => {})

二、如何做

Tree shaking是基於ES6模板語法（import與exports），主要是藉助ES6模組的靜態編譯思想，在編譯時就能確定模組的依賴關係，以及輸入和輸出的變數

Tree shaking無非就是做了兩件事：

透過腳手架vue-cli安裝Vue2與Vue3專案

vue create vue-demo

Vue2 專案

元件中使用data屬性

<script>    export default {        data: () => ({            count: 1,        }),    };</script>

對專案進行打包，體積如下圖

為元件設定其他屬性（compted、watch）

export default {    data: () => ({        question:"",         count: 1,    }),    computed: {        double: function () {            return this.count * 2;        },    },    watch: {        question: function (newQuestion, oldQuestion) {            this.answer = 'xxxx'        }};

再一次打包，發現打包出來的體積並沒有變化

Vue3 專案

元件中簡單使用

import { reactive, defineComponent } from "vue";export default defineComponent({  setup() {    const state = reactive({      count: 1,    });    return {      state,    };  },});

將專案進行打包

在元件中引入computed和watch

import { reactive, defineComponent, computed, watch } from "vue";export default defineComponent({  setup() {    const state = reactive({      count: 1,    });    const double = computed(() => {      return state.count * 2;    });    watch(      () => state.count,      (count, preCount) => {        console.log(count);        console.log(preCount);      }    );    return {      state,      double,    };  },});

再次對專案進行打包，可以看到在引入computer和watch之後，專案整體體積變大了

三、作用

透過Tree shaking，Vue3給我們帶來的好處是：

減少程式體積（更小）減少程式執行時間（更快）便於將來對程式架構進行最佳化（更友好）