啥是树摇

Tree Shaking（树摇）是现代前端构建中的重要优化技术，它通过静态分析移除未使用的代码，从而减小最终打包体积。Vue3 在 Tree Shaking 方面相比 Vue2 有了显著改进。

整一下两个的核心差异对比

特性	Vue2	Vue3
架构设计	Options API 为主，整体打包	Composition API + 模块化设计
打包体积	完整运行时约 23KB	最小运行时约 13KB
按需导入	需要插件支持	原生支持
构建工具	依赖 Webpack	兼容 Vite、Webpack 等
API 设计	全局 API 较多	模块化 API 设计

Vue2 的 Tree Shaking 实现

1. 基本使用方式

// Vue2 典型导入方式
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 组件通常全局注册
Vue.component('MyComponent', MyComponent)

2. 按需导入的局限性

Vue2 本身不支持真正的 Tree Shaking，需要借助 babel 插件：

// 使用 babel-plugin-component 实现部分按需加载
import { Button, Select } from 'element-ui'

// 但仍然会包含 Vue 核心库的全部代码

3. 主要问题

• 全局 API：Vue.nextTick(), Vue.set() 等全局 API 无法被摇树
• Options API：组件选项对象难以静态分析
• 构建依赖：严重依赖 Webpack 和特定插件

Vue3 的 Tree Shaking 革命

1. 模块化架构设计

Vue3 将核心功能拆分为独立模块：

// 可以只导入需要的功能
import { createApp, ref, computed } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'

// 不会包含未使用的功能如 v-model 指令等

2. Composition API 的优势

javascript复制代码收起

// 更容易进行静态分析
import { ref, onMounted, watchEffect } from 'vue'

export default {
  setup() {
    const count = ref(0)
    
    onMounted(() => {
      console.log('组件已挂载')
    })
    
    // 未使用的 API 不会被包含
    return { count }
  }
}

3. 内置指令的优化

// 只有实际使用的指令会被打包
import { vModelText, vShow } from 'vue'

// 如果只使用 v-show，vModelText 不会被包含

结论

Vue3 在 Tree Shaking 方面的改进是革命性的，通过模块化架构和 Composition API 设计，实现了真正的按需编译。相比 Vue2，Vue3 能够：

1. 显著减少打包体积：核心运行时减少约 43%
2. 提供更好的开发体验：原生支持按需导入
3. 提高应用性能：更小的初始加载体积
4. 增强代码可维护性：明确的依赖关系