面试题：Webpack中Tree Shaking在JavaScript代码优化里的基本原理是什么

Question

请阐述Webpack实现JavaScript代码Tree Shaking优化的基本原理，以及在实际项目中开启Tree Shaking需要做哪些配置。

Answer 1

Webpack实现JavaScript代码Tree Shaking优化的基本原理

1. ES6模块静态分析：Tree Shaking基于ES6模块系统的静态结构特性。ES6模块在编译时就能确定其依赖关系和导出内容，不像CommonJS模块那样在运行时才能确定。Webpack利用这个特性，在打包过程中分析模块的导入和导出，构建出模块依赖关系图。
2. 标记未使用模块：通过依赖关系图，Webpack可以标记出哪些模块或模块中的哪些导出在整个应用中从未被使用到。
3. 移除未使用代码：在打包的最后阶段，Webpack将这些被标记为未使用的代码（模块或模块中的部分导出）从最终的bundle文件中移除，从而达到优化代码体积的目的。

在实际项目中开启Tree Shaking需要做的配置

1. 使用ES6模块：确保项目中的JavaScript代码使用ES6模块语法（import和export）进行模块定义和导入。如果使用CommonJS（require和module.exports），Tree Shaking无法生效。
2. Webpack配置：
   • mode设置：在Webpack配置文件（一般是webpack.config.js）中，将mode设置为'production'。在生产模式下，Webpack默认开启了一些优化，包括对Tree Shaking的支持。例如：

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

• 优化项配置（可选）： 如果需要更细粒度的控制，可以配置optimization.minimize为true（生产模式下默认开启），并使用TerserPlugin。TerserPlugin会在压缩代码时进一步移除未使用的代码。例如：

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin()
        ]
    }
};

3. package.json配置：在package.json中，确保sideEffects字段正确设置。如果整个项目没有副作用（如一些纯函数模块，不改变外部状态），可以设置为false。例如：

{
    "sideEffects": false
}

如果有部分模块有副作用（比如一些CSS导入、polyfill等），可以设置为一个数组，列出有副作用的模块路径，如：

{
    "sideEffects": [
        "./src/styles.css",
        "@babel/polyfill"
    ]
}

这样Webpack在Tree Shaking时会保留这些有副作用的模块，不会误删。