面试题：Webpack中tree shaking的基本原理及使用条件

静态分析：Webpack在构建过程中，通过ES6模块语法（import和export）对代码进行静态分析，不需要执行代码，就能确定模块之间的依赖关系和导出内容。例如，对于import { func1 } from './module.js';，可以分析出module.js模块是func1的来源。
标记未使用代码：依据静态分析结果，标记出那些没有被导入和使用的导出内容。比如module.js中有export const func2 = () => {};，但在整个项目中都没有导入func2，就会被标记。
移除未使用代码：在打包阶段，Webpack会将被标记为未使用的代码（通常是未被导入的模块或模块内未被使用的导出）从最终的打包文件中移除，从而实现代码体积的优化。

ES6模块语法：项目中的代码需要使用ES6模块（import和export）来定义和导入模块。CommonJS（require和module.exports）等其他模块系统不支持tree shaking，因为它们是动态的，在运行时才能确定依赖关系，无法进行静态分析。
生产模式：Webpack默认在生产模式下启用tree shaking。因为在开发模式下，为了方便调试，保留所有代码更有利于开发者定位问题。在生产模式下，Webpack会开启更多优化，包括tree shaking。例如，使用webpack -p或webpack --config webpack.production.js等方式进行生产环境的构建。
正确的配置：
- mode设置：在Webpack配置文件（webpack.config.js）中，确保mode设置为'production'，如module.exports = { mode: 'production' };。
- 优化项：optimization.minimize默认在生产模式下为true，会启用TerserPlugin，它可以配合tree shaking移除未使用代码。如果手动配置了optimization.minimize，要确保其值为true。例如：

module.exports = {
    //...其他配置
    optimization: {
        minimize: true
    }
};

第三方库支持：如果项目中使用了第三方库，这些库也需要以ES6模块的形式发布并且遵循ES6模块规范，才能在项目中被tree shaking优化。一些老旧的库可能不支持，此时可能需要寻找替代方案或对库进行特殊处理。

星途面试题库