Webpack无法排除未使用导入（无摇树优化），sideEffects:false无效

无法让Webpack排除未使用的import，即使在package.json中设置了sideEffects: false。

示例 #

// Entry.js
import {controller} from './Setting.js'

// Setting.js
import Component from './Component.js' // Entry.js未使用

export const controller = {};
export const view = Component(controller); // Entry.js未使用

// Component.js 
import 'huge/side-effect/library' // Entry.js未使用，但仍被打包

export default function Component() {}

在此场景中，Entry.js仅导入了纯性质的controller，理论上无需其他依赖。但即使尽可能优化摇树优化设置，'huge/side-effect/library'仍会被打包。

配置 #

// babel.config.js
module.exports = {
  presets: [['@babel/preset-env', { modules: false }]],
};

// package.json
{
  "sideEffects": false
}

^ 仅用于测试，该库仍被打包。

//webpack.config.js
module.exports = {
  /* ... */
  optimization: {
    usedExports: true, // 也尝试过--mode production
  },
}

临时解决方法 #

将controller定义在不导入Component的文件中。

但我想知道是否有办法在同一文件中排除未使用的依赖。

说明 #

如果在Setting.js中不使用Component，其源码和该库不会被打包。可见Webpack认为在导入文件中的使用可能存在副作用。

我尝试过使用/*@__PURE__*/和/*#__PURE__*/（将代码转为函数调用），但遗憾的是该库仍被打包。

核心原因 #

Webpack摇树优化依赖静态分析判断代码是否可安全移除。当前场景的问题点：

1. Component.js的顶级导入'huge/side-effect/library'会被Webpack默认判定为有副作用——模块顶级语句会被无条件执行，除非明确标记无副作用。
2. 即便view导出未被使用，Setting.js导入了Component.js就会触发整个模块的加载，连带执行第三方库的导入语句，导致无法被摇树移除。

具体解决方法 #

1. 精准标记无副作用模块

如果'huge/side-effect/library'本身无副作用，或当前场景不需要其副作用，可以在package.json中精准配置sideEffects：

{
  "sideEffects": [
    "!./Component.js",
    // 保留其他确实有副作用的文件路径
  ]
}

或者直接在Component.js的导入语句上加专属注释：

// Component.js
/*#__NO_SIDE_EFFECTS__*/ import 'huge/side-effect/library'

export default function Component() {}

2. 延迟导入避免顶级依赖

将Component的导入放在函数内部，仅在需要时加载：

// Setting.js
export const controller = {};

// 仅当view被调用时才加载依赖
export const getView = () => {
  const Component = require('./Component.js').default;
  return Component(controller);
};

这样未触发getView()时，Component.js及其依赖不会被打包，摇树优化可正常工作。

3. 强制排除指定库（谨慎使用）

如果确认该第三方库完全不需要打包，可在Webpack配置中添加IgnorePlugin：

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  /* ... */
  plugins: [
    new webpack.IgnorePlugin({
      resourceRegExp: /huge\/side-effect\/library/,
    }),
  ],
};

注意：此方法会彻底移除该库，若后续代码实际用到会引发运行时错误，需严格确认使用场景。

4. 拆分模块（长期最优解）

将无依赖的纯逻辑（如controller）与带复杂依赖的模块（如view）拆分，不仅解决摇树优化问题，还能提升代码可维护性与打包效率，是架构层面的最优方案。

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