What is the impact of importing from TypeScript barrel index files on Webpack v4 code-spliting / tree-shaking?

Question

I am using TypeScript barrel index files (i.e. re-export pattern) to solve a needed cyclic dependency (i.e. circular imports) as explained in this article.

However, the article's author mentioned that this could impact code-splitting / tree-shaking by bundlers such as Webpack v4. I just want to understand the impact in general and how does it manifests itself?

Is there a better way to do solve circular dependencies and maintain better code-splitting / tree-shaking?

Answer 1

You can keep your barrel files, but you need to disable side effects, otherwise Webpack will import all the exported files every time you need a single module.

I discovered it while investigating on my own question: Webpack doesn't split a huge vendor file when modules are exported and imported using index files where you can maybe find more details.

Here is the Webpack configuration to disable side effects from specific files:

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