面试题：Webpack Tree Shaking优化策略及场景应用

Question

在一个大型前端项目中，使用Webpack进行打包，Tree Shaking已经开启，但发现一些未使用的代码依然被打包进去。分析可能存在哪些原因导致这种情况发生？针对这些原因，你会采取哪些优化策略？请举例说明不同场景下这些策略的应用方式。

Answer 1

原因分析

1. 动态导入（Dynamic Imports）：使用import()语法进行动态导入时，如果导入的模块在运行时才确定，Webpack无法静态分析哪些代码未被使用，导致未使用代码被打包。例如：

// 动态导入模块
const moduleName = Math.random() > 0.5? 'unusedModule' : 'usedModule';
import(moduleName).then(module => {
  // 使用模块
});

2. 副作用代码（Side - effects）：有些模块具有副作用，例如在模块中直接修改全局变量或执行一些初始化操作。Webpack默认会保留具有副作用的模块，即使这些模块中的部分代码未被显式使用。比如：

// 具有副作用的模块，修改全局变量
let globalVar = 0;
export function incrementGlobalVar() {
  globalVar++;
}
// 即使没有调用incrementGlobalVar，此模块也会被保留

3. Babel转译问题：Babel在转译过程中，可能会改变代码结构，导致Webpack无法正确识别未使用代码。例如，Babel可能会将ES6模块转译成CommonJS模块，而CommonJS模块的导入机制与ES6模块不同，可能影响Tree Shaking。
4. 配置问题：Webpack配置不正确，例如没有正确设置mode为production，或者没有正确配置optimization.minimize以及相关插件（如TerserPlugin），可能导致Tree Shaking未生效。

优化策略及应用

1. 静态导入替代动态导入：尽量避免使用动态导入，如果必须使用，确保可以在构建时确定导入的模块。例如：

// 静态导入
import usedModule from './usedModule.js';
// 使用usedModule

2. 分离副作用代码：将副作用代码与正常功能代码分离，将副作用代码单独引入。例如：

// 副作用模块
export function setupGlobalState() {
  let globalVar = 0;
  window.globalVar = globalVar;
}
// 功能模块
export function add(a, b) {
  return a + b;
}
// 在入口文件
import { setupGlobalState } from './sideEffectModule.js';
setupGlobalState();
import { add } from './functionModule.js';
// 使用add函数

3. Babel配置调整：确保Babel配置不会干扰Tree Shaking。可以使用@babel/plugin - transform - runtime插件，它可以避免在每个文件中重复引入辅助代码，同时不影响Tree Shaking。例如在.babelrc中配置：

{
  "presets": [
    [
      "@babel/preset - env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ],
  "plugins": [
    "@babel/plugin - transform - runtime"
  ]
}

4. 正确Webpack配置：确保mode设置为production，并且正确配置optimization.minimize。例如在webpack.config.js中：

module.exports = {
  mode: 'production',
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true // 可以通过此选项删除console.log等未使用代码
          }
        }
      })
    ]
  }
};