Tree-shaking 是一个在现代 JavaScript 构建过程中常用的术语，主要指移除 JavaScript 上下文中未引用的代码(dead code)的过程。

以下是详细解释：

  1. 基本概念：
// 假设有一个 math.js 文件
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// 在 main.js 中
import { add } from './math.js';
// 只使用了 add 函数

// 最终打包时，subtract 函数会被移除，因为它未被使用
  1. 工作原理：
  • 构建工具(如 webpack、vite)从入口文件开始分析
  • 标记所有被引用的模块和导出
  • 移除未被使用的代码
  • 生成最终的优化后的包
  1. 使用条件：
// Tree-shaking 生效的条件：
// 1. 使用 ES Module 语法 (import/export)
import { Component } from './component';  // ✅ 可以 tree-shake

// CommonJS 语法不支持 tree-shaking
const Component = require('./component');  // ❌ 不可以 tree-shake

// 2. 使用静态导入
import { Button } from 'ui-lib';  // ✅ 可以 tree-shake

// 动态导入可能影响 tree-shaking
const Button = await import('ui-lib');  // ❌ 可能无法完全 tree-shake
  1. 实际应用示例：
// 不好的做法 - 导入整个库
import * as lodash from 'lodash';  // 会导入整个 lodash 库

// 好的做法 - 按需导入
import { map } from 'lodash-es';  // 只导入需要的函数

// UI 组件库的使用
// 不好的做法
import WotDesignUni from 'wot-design-uni';  // 导入整个组件库

// 好的做法
import { useToast } from 'wot-design-uni/components/wd-toast';  // 只导入 Toast 组件
  1. 优势：
  • 减小最终打包体积
  • 提高应用加载速度
  • 优化资源使用
  • 减少不必要的代码传输

在 uni-app 项目中，合理使用 Tree-shaking 友好的导入方式可以显著优化小程序或 H5 应用的体积和性能。