面试题：Webpack中Tree Shaking的基本原理及应用场景

Question

请简要阐述Webpack中Tree Shaking的基本原理，并举例说明它在前端项目中的常见应用场景。

Answer 1

Tree Shaking基本原理

1. 静态分析：Webpack在构建过程中，借助ES6模块的静态结构特性（即import和export语句在编译时就能确定依赖关系），对代码进行静态分析，识别模块间的导入导出关系。它不需要执行代码，就能知道哪些模块被引入，哪些模块没有被引入。
2. 标记未使用代码：通过静态分析，Webpack标记出那些没有被其他模块直接或间接引用的模块及导出内容，这些未被引用的部分被视为“死代码”。
3. 移除死代码：在打包阶段，Webpack会将这些被标记的“死代码”从最终的打包文件中移除，从而达到优化输出文件大小，减少不必要代码的目的。

常见应用场景

1. 引入第三方库：例如引入lodash库，若项目中只使用了lodash的debounce函数，在配置了Tree Shaking后，Webpack只会将debounce相关代码打包进来，而不会把整个lodash库都包含，有效减小了打包体积。

// 正常引入lodash全部功能
// import _ from 'lodash'; 

// 只引入debounce函数
import {debounce} from 'lodash'; 

2. 自己编写的模块：在一个大型前端项目中，可能存在一些工具函数模块，部分工具函数只在特定场景下使用。例如有一个utils.js模块，包含formatDate、calculateSum等多个函数，但实际项目中只有formatDate被使用，通过Tree Shaking，calculateSum函数的代码就不会被打包进最终文件。

// utils.js
export const formatDate = (date) => {
    // 日期格式化逻辑
};
export const calculateSum = (a, b) => {
    return a + b;
};

// main.js
import {formatDate} from './utils.js';
// 这里只使用了formatDate，calculateSum不会被打包