面试题：Webpack Tree Shaking对复杂JavaScript项目结构优化的策略

1. 确保项目使用ES6模块

Webpack的Tree Shaking特性最适用于ES6模块，因为ES6模块的静态结构使得Webpack可以在编译时分析模块依赖。将项目中的CommonJS模块逐步迁移为ES6模块。例如，将module.exports = { function1: function() { /*...*/ } };改写为export function function1() { /*...*/ }。

2. 配置Webpack

mode设置：在Webpack配置文件（通常是webpack.config.js）中，将mode设置为'production'。Webpack在生产模式下会自动启用一些优化，包括Tree Shaking。例如：

module.exports = {
    mode: 'production',
    // 其他配置项...
};

optimization.minimize：确保optimization.minimize为true（生产模式下默认为true）。这会启用TerserPlugin，它可以移除未使用的代码。如果需要自定义TerserPlugin的配置，可以这样做：

module.exports = {
    // 其他配置项...
    optimization: {
        minimizer: [
            new TerserPlugin({
                // 自定义TerserPlugin配置，如并行压缩
                parallel: true
            })
        ]
    }
};

3. 处理第三方库

使用ES6版本库：尽量使用提供ES6模块版本的第三方库。例如，对于lodash库，可以使用lodash-es，它是lodash的ES6模块版本，能更好地支持Tree Shaking。
按需引入：如果第三方库没有提供合适的ES6模块版本，可以按需引入。比如对于moment库，若只想使用日期格式化功能，可以这样引入：

import moment from'moment/src/lib/moment';
import'moment/src/lib/locale/en-gb';

4. 处理副作用

package.json中的sideEffects：在项目的package.json中，使用sideEffects字段标记哪些文件或模块有副作用（即除了导出内容外，还有其他影响，如修改全局变量）。例如，如果项目中有一个用于设置全局样式的CSS文件styles.css，可以这样配置：

{
    "sideEffects": [
        "styles.css"
    ]
}

标记单个模块：如果某个JavaScript模块有副作用，但不想将整个目录都标记为有副作用，可以在模块中使用/*#__PURE__*/注释（Webpack 4及以上）。例如：

/*#__PURE__*/
function sideEffectFunction() {
    // 有副作用的代码，如修改全局变量
    window.someGlobalVariable = 'value';
}
sideEffectFunction();
export function usefulFunction() {
    return 'useful result';
}

5. 检查和测试

代码分析工具：使用工具如webpack-bundle-analyzer来分析打包后的文件，查看哪些代码被包含进来，哪些代码通过Tree Shaking被移除。安装并配置：

npm install --save-dev webpack-bundle-analyzer

在Webpack配置文件中添加：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
    // 其他配置项...
    plugins: [
        new BundleAnalyzerPlugin()
    ]
};

单元测试和集成测试：确保项目有完善的单元测试和集成测试，以验证优化后的代码功能是否正常。在优化过程中，可能会意外移除一些被间接使用的代码，通过测试可以及时发现这些问题。

6. 持续优化

监控依赖变化：随着项目的发展，依赖库可能会更新，新引入的模块可能不支持Tree Shaking或者引入新的副作用。定期检查项目依赖，确保Tree Shaking持续有效。
性能监测：使用性能监测工具如Lighthouse（用于网页性能监测），定期评估优化效果，根据结果调整优化策略。

星途面试题库

面试题：Webpack Tree Shaking对复杂JavaScript项目结构优化的策略

知识考点

面试题答案

1. 确保项目使用ES6模块

2. 配置Webpack

3. 处理第三方库

4. 处理副作用

5. 检查和测试

6. 持续优化