webpack5生产与开发模式下import/export行为不一致问题求助

问题根因定位 #

这个问题本质是Webpack 5生产模式下的**树摇（Tree Shaking）**优化逻辑导致的：

• 你使用import './foo'这类裸导入语法时，没有显式引用该模块的任何导出值，Webpack会默认判定该模块无执行副作用，直接将整个模块及其依赖链（包括comp.vue）从生产打包产物中剔除，所以对应代码完全不会执行
• 当你改成import {Component} from './foo'时，因为显式引用了模块导出值，Webpack会判定该模块有用，不会执行剔除逻辑，因此功能正常
• sourcemap配置变动影响执行结果是因为不同sourcemap类型对应不同的编译优化预设：eval-cheap-source-map默认会关闭部分激进的树摇优化、保留模块执行上下文，刚好绕开了副作用判定逻辑，属于巧合的临时解决方案

排查步骤（先全关优化再逐步定位） #

1. 全量禁用生产优化确认根因 #

在生产模式的webpack配置中添加以下配置，关闭所有生产优化项：

module.exports = {
  mode: 'production',
  optimization: {
    // 关闭代码压缩
    minimize: false,
    // 关闭导出引用标记
    usedExports: false,
    // 关闭副作用判定
    sideEffects: false,
    // 关闭模块合并
    concatenateModules: false,
    // 关闭Webpack5新增的内部依赖图分析
    innerGraph: false
  }
}

改完打包测试，如果功能恢复正常，即可确认是生产优化环节导致的问题。

2. 逐步开启优化定位具体规则 #

每次仅将上述配置中的一项改回生产默认值，重新打包测试，直到问题复现：

• 优先测试sideEffects和usedExports两个配置项，90%的同类问题都是这两个配置的副作用判定逻辑导致的
• 其次测试innerGraph，Webpack5新增的这个依赖分析逻辑会比旧版本更激进地剔除无引用模块
• 最后测试剩余两个配置项

永久解决方案 #

如果确认是副作用判定导致的问题，有两种常用修复方案：

方案1：全局配置副作用规则 #

在项目根目录package.json中添加sideEffects字段，把所有使用裸导入、有执行副作用的文件/目录纳入白名单：

{
  "sideEffects": [
    "./src/foo/**/*.js",
    "./src/**/*.vue",
    "*.css"
  ]
}

方案2：在loader层面标记副作用 #

可以直接在webpack的模块规则中给对应类型文件标记为有副作用：

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader',
        sideEffects: true
      },
      {
        test: /foo\/.*\.js$/,
        sideEffects: true
      }
    ]
  }
}

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