vue3 中 TreeShaking 特性

1. 什么是 Tree Shaking

Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术，专业术语叫 Dead code elimination。

简单来讲，就是在保持代码运行结果不变的前提下，去除无用的代码。

在 Vue 2 中，无论我们使用什么功能，它们最终都会出现在生产代码中。主要原因是 Vue 实例在项目中是单例的，捆绑程序无法检测到该对象的哪些属性在代码中被使用到。

而 Vue 3 源码引入 tree shaking 特性，将全局 API 进行分块。如果您不使用其某些功能，它们将不会包含在您的基础包中。

2. 如何摇树

Tree shaking 是基于 ES6 模块语法（import 与 exports），主要是借助 ES6 模块的静态编译思想，在编译时就能确定模块的依赖关系，以及输入和输出的变量。

Tree shaking 无非就是做了两件事：

  1. 编译阶段：利用 ES6 模块静态分析，识别出哪些导出被引用、哪些没被引用。
  2. 打包阶段：通过打包工具（webpack / rollup）将没被引用的代码从最终 bundle 中剔除。
// vue2 中：全量挂载在 Vue 上，无法被 tree shaking
import Vue from 'vue'
Vue.nextTick(() => {})
Vue.set(obj, 'a', 1)

// vue3 中：按需引入，未使用的 API 会被摇掉
import { ref, computed, nextTick } from 'vue'
nextTick(() => {})
// ref / computed 如果没用到，则不会出现在最终 bundle 中

3. 作用

  • 减少最终 bundle 体积：没有用到的 Vue 3 API 不会被打包。
  • 按需加载：项目可以选用最小化的 Vue 3 子集。
  • 改善应用启动速度：更小的 bundle 意味着更快的下载与解析。

来源整理自：vue3js.cn 面试官系列