面试题：Webpack中tree shaking在不同模块类型下的差异及处理

Question

Webpack支持多种模块类型（如ES6模块、CommonJS模块），请分析tree shaking在这些不同模块类型下的差异表现，以及如何针对不同模块类型更好地应用tree shaking来减小文件体积？

Answer 1

ES6模块

• 差异表现：ES6模块是静态的，其导入和导出在编译时就已确定。Tree shaking对ES6模块支持良好，因为Webpack可以基于静态分析确定哪些导出未被使用，并在打包时将其排除，实现精准的代码剔除。例如，一个ES6模块中定义多个函数，只有被导入使用的函数会被打包进最终文件。
• 应用方式：确保代码采用ES6模块规范编写，在Webpack配置中，默认情况下，生产模式会自动开启对ES6模块的tree shaking优化。如果需要自定义，可以通过mode设置为'production'，并结合optimization.minimize等相关配置来精细控制。同时，尽量使用具名导出而不是默认导出，因为具名导出更利于Webpack进行静态分析，例如export const func1 = () => {}; export const func2 = () => {};。

CommonJS模块

• 差异表现：CommonJS模块是动态的，其导入和导出是在运行时确定。这使得Webpack较难对CommonJS模块进行tree shaking，因为无法在编译阶段完全确定哪些代码未被使用。例如，require语句在运行时才解析模块，Webpack难以在打包时判断哪些部分可被剔除。
• 应用方式：尽量将CommonJS模块转换为ES6模块，如果无法转换，可以使用babel-plugin-transform-imports等插件来模拟类似tree shaking的效果。该插件可以将动态导入转换为静态导入，帮助Webpack进行优化。在Webpack配置中，可以配置module.rules，使用Babel来处理CommonJS模块，并结合插件进行优化，例如：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            plugins: [
              ['transform-imports', {
                // 配置具体的库，如lodash
                '@lodash': {
                  transform: '@lodash/${member}',
                  preventFullImport: true
                }
              }]
            ]
          }
        }
      }
    ]
  }
};