Vue 3.0中Treeshaking特性

发布于：2025-05-09 ⋅ 阅读:(8) ⋅ 点赞:(0)

Vue 3.0中Treeshaking特性

什么是 Tree Shaking？

Tree Shaking 是一种优化技术，用于移除 JavaScript 上下文中未使用的代码。在 Vue 3.0 中，通过模块化的设计和 ES Modules 的支持，实现了更高效的 Tree Shaking 功能。这意味着如果某个功能或方法没有被显式使用，它就不会被打包到最终的应用程序中。

Vue 2 和 Vue 3 的对比

在 Vue 2 中，由于 Vue 实例是一个单例对象，所有的 API 都会被默认加载到项目中，即使有些功能并未实际使用。这导致了即使只用了少量的功能，整个框架的核心文件也会全部包含在打包结果中。

而在 Vue 3 中，核心库进行了重构，API 被拆分为独立的小型模块。例如，reactivity 模块负责响应式系统的实现，而 runtime-dom 模块则专注于模板编译和 DOM 渲染等功能。这样的设计让开发者可以根据需要按需引入所需的模块，从而显著减少打包体积。

示例：Vue 3 中的 Tree Shaking 应用

假设在一个简单的 Vue 3 项目中，我们只需要使用 ref 和 computed 来构建一个基本组件：

// 只导入必要的 API
import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0); // 创建一个响应式的计数器
    const doubleCount = computed(() => count.value * 2); // 计算属性

    return { count, doubleCount }; // 将状态暴露给模板
  }
};

在这个例子中，只有 ref 和 computed 被显式导入并使用，其他任何 Vue 提供的功能都不会出现在最终的打包文件中。

再来看另一个场景，如果我们还需要使用生命周期钩子（如 onMounted），只需额外导入这个特定的钩子即可：

import { ref, computed, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);

    onMounted(() => {
      console.log('Component has been mounted');
    });

    return { count, doubleCount };
  }
};

这里可以看到，除了之前提到的 ref 和 computed，新增加了一个 onMounted 方法，但它也不会影响那些未使用的功能进入打包范围。

数据驱动的例子

假如我们在组件中有三个数据项 (var1, var2, var3)，其中前两个参与视图渲染逻辑，最后一个完全没被引用：

<template>
  <div>{{ var1 }} {{ var2 }}</div> <!-- var3 并未在此处显示 -->
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      var1: 'Hello',
      var2: 'World',
      var3: 'Unused', // 此字段不会对页面产生效果
    });

    return { ...state }; // 返回所有状态
  },
};
</script>

当运行打包命令时，现代 bundler 工具（如 Webpack 或 Vite）能够识别出 var3 没有被实际消费掉，并将其从最终产物中剔除。

在这里插入图片描述

Vue 3.0中Treeshaking特性