无法让webpack的usedExport与Tree Shaking功能生效求助

针对你遇到的@mdi/js无法被Tree Shaking的问题，结合你已完成的配置，补充以下排查与修复方向：

1. 修正导入方式与模块格式匹配 #

• @mdi/js默认导出是包含所有图标的大对象，若你使用import mdi from '@mdi/js'再通过mdi.mdiXXX引用图标，webpack无法静态分析对象属性的使用情况，导致摇树失效。必须改用命名导入：

  import { mdiAccount, mdiSettings } from '@mdi/js';
  

• 检查@mdi/js的package.json是否存在module字段（指向ES模块版本）。若其main字段指向CommonJS格式文件，webpack对CommonJS模块的Tree Shaking支持有限，需在webpack配置中优先加载ES模块：

  module.exports = {
    resolve: {
      mainFields: ['module', 'main']
    }
  };
  

2. 完善webpack优化配置细节 #

• 确保开启optimization.concatenateModules（production模式默认开启，可显式配置强化效果），该选项会将多个模块合并为一个，提升Tree Shaking的准确性：

  module.exports = {
    optimization: {
      concatenateModules: true
    }
  };
  

• 确认Terser配置中未禁用摇树相关选项，保留passes:3的同时，确保compress.pure_getters设为true，帮助Terser识别未使用的属性：

  module.exports = {
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            compress: {
              pure_getters: true,
              passes: 3
            }
          }
        })
      ]
    }
  };
  

3. 排查Babel与插件干扰 #

• 确保Babel配置中未启用@babel/plugin-transform-modules-commonjs这类将ES模块转为CommonJS的插件，即使设置了modules: false，也要检查@babel/preset-env是否在特定环境下自动开启模块转换，需显式关闭：

  {
    "presets": [
      ["@babel/preset-env", { "modules": false }]
    ]
  }
  

• 移除babel-plugin-add-module-exports这类会破坏ES模块结构的插件，它们会导致webpack无法正确识别导出语句。

4. 验证摇树效果 #

• 使用webpack --stats detailed生成构建统计报告，查看modules部分中@mdi/js相关模块的usedExports标记，确认未使用的导出是否被标记为未使用。
• 借助webpack-bundle-analyzer插件可视化打包结果，直接查看@mdi/js的体积占比，验证修复后的效果。

内容的提问来源于stack exchange，提问作者Dmitry Shvedov