Vite的Tree Shaking与Rollup集成

Wed, 05 Mar 2025 10:37:25 +0000

考察点分析

该问题主要考察以下核心能力维度：

具体技术评估点：

Vite通过Rollup实现的Tree Shaking流程分为四步：

模块静态解析：利用ES模块的静态导入/导出特性，构建从入口文件开始的模块依赖图。不同于CommonJS的动态require，ESM的静态结构允许构建时确定所有依赖关系。
副作用检测：通过package.json的sideEffects字段识别无副作用的纯模块。标记为false的模块会直接跳过副作用检测，显著提升未使用模块的淘汰效率。
可达性分析：基于入口模块进行深度遍历，通过抽象语法树（AST）分析确定实际被使用的导出项。未被其他模块引用的导出将被标记为"dead code"。
安全剔除：在代码生成阶段，通过以下策略确保安全移除：

Vite通过Rollup实现生产构建时的Tree Shaking，核心流程分为三个阶段：

静态结构解析：基于ESM的静态语法特征构建模块依赖图谱，识别所有import/export声明。这是Tree Shaking的前提条件，例如对于仅部分导入的模块：

 // math.js
export const add = (a,b) => a + b
export const unused = () => {}

// main.js
import { add } from './math' // unused将被标记为dead code

副作用标注：结合package.json的sideEffects属性和代码静态分析，识别可能改变全局状态或具有隐式依赖的模块。无副作用的模块可安全删除未使用导出。