重新导出未与 Webpack 5 正确捆绑

Question

在捆绑我的 Web 应用程序时，我意识到 重新导出 的 （某些） 模块无法按预期工作。我尝试了多个 优化设置 但到目前为止没有成功。

设置

所以基本上我有以下设置

config/
  webpack.config.ts
  package.json

frontend/
  apps/
    app1/
      src/
        index.tsx
        App.tsx
        ...
  packages/
    test/
      index.ts
      testFunc.ts
      test1Func.ts
      Test.tsx
      Test1.tsx

所以我运行来自 config 的 webpack 带有 入口点 frontend/apps/app1/index.tsx 导入App.tsx （标准 React 应用程序）.

一切正常，但我意识到当从 app1 生成 生产构建 时，我的 [=16= 中未使用的导出] 出现在包中。澄清

import { testFunc } from 'packages/test' // <- `packages` is an alias

const App: React:FC = () => {
  const t = testFunc();
  return <>Hello World!</>;
}

将在捆绑包中包含 Test.tsx、Test1.tsx 和 'test1Func.ts'。我的 index.ts 在 test/ 看起来像

export { testFunc } from './testFunc';
export { test1Func } from './test1Func';
export { Test } from './Test';
export { Test1 } from './Test1';

我应该提到 testFunc1.ts 包含一个 useEffect 钩子，因为我发现只要我有 React 相关代码，就不会再对源代码进行 tree shaking。所以

// test1Func.ts
export const test1Func = () => {
  useEffect(() => {
    // do nothing
  }, []);
  return "Test 1";
}

但是，如果我直接导入我的文件，例如。 import { testFunc } from 'packages/test/testFunc'，一切正常，只有 test 出现在捆绑包中。这也适用于其他测试组件：

应用导入测试

testFunc

通过 index.ts 导入并在 App.tsx 中使用 => 在 test/ 中捆绑所有文件 ❌
通过 import { testFunc } from 'packages/test/testFunc' 导入并在 App.tsx 中使用 => 只有 testFunc.ts 包含在捆绑包中 ✅
通过 import { testFunc } from 'packages/test/testFunc' 导入 & 不要在 App.tsx 中使用 => 捆绑包中不包含任何内容 ✅

testFunc1 | Test | Test1 <- 他们的行为都一样

通过 index.ts 导入并在 App.tsx 中使用 => 捆绑 除了 testFunc ❌
通过 import { test1Func } from 'packages/test/test1Func' 导入并在 App.tsx 中使用 => 只有 test1Func.ts 包含在捆绑包中 ✅
通过 import { test1Func } from 'packages/test/testFunc' 导入 & 不要在 App.tsx 中使用 => 捆绑包中不包含任何内容 ✅

我猜这只是一个配置错误，尽管我已经尝试了多种不同的优化设置。最接近的可能是 sideEffects 选项，但到目前为止，这也没有任何效果。

有什么想法吗？

非常感谢！

Answer 1

我找到了解决办法！

正如猜测的那样，我有 Webpack 的 optimization.sideEffects 属性配置错误。 sideEffects 是正确 tree shaking 所必需的。

但是，为了使这项工作正常进行，有 2 个目的地，您必须在其中设置副作用属性:

你的 package.json （在我的例子中，我在我的 monorepo 中使用的每个包）
并在 webpack.config.ts

解决方案

不可否认，非常令人困惑的是您必须设置

sideEffects: false 在 package.json
和 sideEffects: true 在 webpack.config.ts

optimization

Here's有兴趣的话再多说一点。

重新导出未与 Webpack 5 正确捆绑

Re-exports not properly bundled with Webpack 5

bundle

typescript

reactjs

webpack-5

设置

应用导入测试

解决方案