当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScriptTreeShaking原理与应用解析

JavaScriptTreeShaking原理与应用解析

2025-11-07 23:13:32 0浏览收藏

今天golang学习网给大家带来了《JavaScript Tree Shaking 原理详解》，其中涉及到的知识点包括等等，无论你是小白还是老手，都适合看一看哦~有好的建议也欢迎大家在评论留言，若是看完有所收获，也希望大家能多多点赞支持呀！一起加油学习~

Tree Shaking 是构建工具基于 ES Module 静态结构实现的代码优化技术，通过静态分析标记未使用导出并结合 sideEffects 配置与压缩工具剔除死代码，从而减小打包体积。

JavaScript Tree Shaking原理实现

Tree Shaking 并不是 JavaScript 引擎本身的功能，而是一种在构建阶段由打包工具（如 Webpack、Rollup、Vite 等）实现的优化技术。它的目标是“摇掉”那些被导入但未实际使用的代码，从而减小最终打包体积。虽然名字听起来像运行时行为，但它本质上是静态分析 + 模块机制结合的产物。

1. 基于 ES Module 的静态结构

Tree Shaking 能够实现的前提是使用 ES6 Module（即 import/export），因为这种模块系统是静态的——模块依赖和导出在代码解析阶段就能确定，不需要执行代码。

与之对比，CommonJS（require/module.exports）是动态的，比如：

ES Module（静态，支持 Tree Shaking）：

import { func } from './utils.js';

CommonJS（动态，不支持 Tree Shaking）：

const utils = require('./utils');
const func = utils.func;

甚至可以写成：

if (Math.random() > 0.5) {
  const mod = require('some-module');
}

这种动态性让构建工具无法在不执行代码的情况下判断哪些模块真正被使用，因此无法安全地移除代码。

2. 静态分析标记未使用导出

构建工具在打包过程中会进行以下几步操作：

从入口文件开始，递归解析所有 import 语句
构建模块依赖图（Module Dependency Graph）
标记每个模块中哪些 export 被实际引用
未被引用的 export 被标记为“可删除”

例如：

// utils.js
export const unusedFunc = () => {
  console.log("I'm not used");
};

export const usedFunc = () => {
  console.log("I'm used");
};

// main.js
import { usedFunc } from './utils.js';
usedFunc();

打包工具发现 unusedFunc 没有被任何模块引用，就可以在最终输出中将其剔除。