快捷導(dǎo)航

Vue 3.0中Treeshaking特性及作用

更新時(shí)間：2023年10月31日 09:54:41 作者：囂張農(nóng)民

Tree shaking 是一種通過清除多余代碼方式來優(yōu)化項(xiàng)目打包體積的技術(shù),就是在保持代碼運(yùn)行結(jié)果不變的前提下,去除無用的代碼,本文給大家介紹Vue 3.0中Treeshaking特性是什么,感興趣的朋友一起看看吧

一、是什么

Tree shaking 是一種通過清除多余代碼方式來優(yōu)化項(xiàng)目打包體積的技術(shù)，專業(yè)術(shù)語叫 Dead code elimination

簡單來講，就是在保持代碼運(yùn)行結(jié)果不變的前提下，去除無用的代碼

如果把代碼打包比作制作蛋糕，傳統(tǒng)的方式是把雞蛋（帶殼）全部丟進(jìn)去攪拌，然后放入烤箱，最后把（沒有用的）蛋殼全部挑選并剔除出去

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

也就是說，tree shaking 其實(shí)是找出使用的代碼

在Vue2中，無論我們使用什么功能，它們最終都會(huì)出現(xiàn)在生產(chǎn)代碼中。主要原因是Vue實(shí)例在項(xiàng)目中是單例的，捆綁程序無法檢測到該對象的哪些屬性在代碼中被使用到

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

而Vue3源碼引入tree shaking特性，將全局 API 進(jìn)行分塊。如果您不使用其某些功能，它們將不會(huì)包含在您的基礎(chǔ)包中

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

二、如何做

Tree shaking是基于ES6模板語法（import與exports），主要是借助ES6模塊的靜態(tài)編譯思想，在編譯時(shí)就能確定模塊的依賴關(guān)系，以及輸入和輸出的變量

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

編譯階段利用ES6 Module判斷哪些模塊已經(jīng)加載
判斷那些模塊和變量未被使用或者引用，進(jìn)而刪除對應(yīng)代碼

下面就來舉個(gè)例子：

通過腳手架vue-cli安裝Vue2與Vue3項(xiàng)目

Vue2 項(xiàng)目

組件中使用data屬性

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

對項(xiàng)目進(jìn)行打包，體積如下圖

為組件設(shè)置其他屬性（compted、watch）

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

再一次打包，發(fā)現(xiàn)打包出來的體積并沒有變化

Vue3 項(xiàng)目

組件中簡單使用

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

將項(xiàng)目進(jìn)行打包

在組件中引入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,
    };
  },
});

再次對項(xiàng)目進(jìn)行打包，可以看到在引入computer和watch之后，項(xiàng)目整體體積變大了