面试题：Webpack中tree shaking在复杂项目里基础配置及原理

Question

在一个有多个入口、多模块依赖的复杂前端项目中，简述如何配置Webpack实现tree shaking。并解释tree shaking的基本原理是什么，它是如何检测和移除未使用代码的？

Answer 1

配置Webpack实现tree shaking

1. 使用ES6模块：确保项目中的模块使用ES6的import和export语法进行定义和引入。因为tree shaking依赖于ES6模块的静态结构分析，CommonJS等动态引入方式无法被有效处理。
2. mode设置为production：在Webpack配置文件中，将mode设置为production。Webpack在生产模式下会自动开启一些优化，包括tree shaking。例如：

module.exports = {
    mode: 'production'
};

3. 使用terser-webpack-plugin：该插件在生产模式下默认启用，它会对代码进行压缩和优化，移除未使用的代码。如果需要自定义配置，可以在optimization.minimizer中进行配置。例如：

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
    optimization: {
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    compress: {
                        drop_console: true // 例如，移除console.log语句
                    }
                }
            })
        ]
    }
};

4. 确保package.json中的sideEffects字段：在package.json中，sideEffects字段用于告知Webpack哪些文件或模块有副作用（例如，会影响全局状态、执行非导出功能的代码）。如果项目中的模块都没有副作用，可以将sideEffects设置为false。如果有部分模块有副作用，可以指定这些模块的路径，例如：

{
    "sideEffects": [
        "./src/styles.css",
        "*.scss"
    ]
}

tree shaking基本原理

1. 静态分析：Webpack在构建过程中，通过静态分析ES6模块的import和export语句，构建出模块的依赖关系图。它会分析每个模块中导出的内容以及哪些模块导入了这些内容。
2. 标记未使用模块：基于依赖关系图，Webpack可以判断哪些模块或导出的内容在整个应用中没有被导入使用。这些未使用的模块或导出内容就会被标记为可以移除。
3. 移除未使用代码：在构建的最后阶段，通常是在压缩代码时（如使用terser-webpack-plugin），这些被标记为未使用的代码会被实际移除，从而减小打包后的文件体积。

检测和移除未使用代码的方式

1. 依赖关系分析：Webpack从入口点开始，递归地分析模块之间的依赖关系。例如，假设有一个入口文件index.js导入了moduleA，moduleA又导入了moduleB，Webpack会构建出这样的依赖链。同时，它会记录每个模块导出的内容以及哪些模块使用了这些导出。
2. 死代码检测：如果某个模块的导出内容在整个依赖关系图中没有被任何其他模块导入使用，那么这个模块或其部分导出就被视为死代码。例如，moduleB导出了functionX，但在整个项目中没有任何地方导入functionX，则functionX相关代码会被标记为可移除。
3. 代码移除：在Webpack的优化阶段，特别是使用压缩插件（如terser-webpack-plugin）时，会遍历代码并移除那些被标记为未使用的代码段。这不仅包括整个未使用的模块，还包括模块内部未被使用的函数、变量等。