从 TypeScript 桶索引文件导入对 Webpack v4 代码分割/树摇动有什么影响？

Question

我正在使用 TypeScript 桶索引文件（即重新导出模式）来解决所需的循环依赖项（即循环导入），如本文所述。

然而，文章作者提到这可能会影响 Webpack v4 等捆绑程序的代码分割/树摇动。我只是想了解总体影响以及它是如何体现的？

有没有更好的方法来解决循环依赖并维护更好的代码分割/树摇动？

Answer 1

你可以保留你的barrel文件，但是你需要禁用副作用，否则Webpack将在你每次需要单个模块时导入所有导出的文件。

我在调查我自己的问题时发现了这一点：当使用索引文件导出和导入模块时，Webpack 不会分割一个巨大的供应商文件，您可能可以在索引文件中找到更多详细信息。

以下是禁用特定文件副作用的 Webpack 配置：

{
  module: {
    rules: [
      // other rules...
      {
        test: [/src\/common\/index.ts/i, /src\/hooks\/index.ts/i],
        sideEffects: false,
      }
    ]
  }
}