說說Vue 3.0中Treeshaking特性?舉例說明一下?

林恒發表於2024-03-07

這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助

說說Vue 3.0中Treeshaking特性?舉例說明一下?

一、是什麼

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模板語法(importexports),主要是藉助ES6模組的靜態編譯思想,在編譯時就能確定模組的依賴關係,以及輸入和輸出的變數

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

  • 編譯階段利用ES6 Module判斷哪些模組已經載入
  • 判斷那些模組和變數未被使用或者引用,進而刪除對應程式碼

下面就來舉個例子:

透過腳手架vue-cli安裝Vue2Vue3專案

vue create vue-demo

Vue2 專案

元件中使用data屬性

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

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

為元件設定其他屬性(comptedwatch

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,
    };
  },
});

將專案進行打包

在元件中引入computedwatch

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,
    };
  },
});

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

三、作用

透過Tree shakingVue3給我們帶來的好處是:

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

參考文獻

  • https://segmentfault.com/a/1190000038962700

相關文章