[SWC] [Webpack] [Tree Shaking] combines exports of modules and constants across pages

SlimDaddy228 commented 2 months ago

Link to the code that reproduces this issue

https://github.com/SlimDaddy228/nextjs-bug-report

To Reproduce

You need to build the project using the command in cmd - npm run build

Current vs. Expected behavior

We can observe that on completely different pages, completely different const imports are used, but the only thing they have in common is that they are in the same file

app/test/layout.tsx

app/layout.tsx

After building the project, we can see this result

.next/static/chunks/app/layout-8c27ef9d132a8703.js

app/.next/static/chunks/app/test/layout-276ac73023152d33.js

Instead of separating the imported constants, it combines them into one single whole on all pages, and because of this the bundle unnecessarily increases

What behavior was expected: .next/static/chunks/app/layout-8c27ef9d132a8703.js Should only have TEST_2 constant

app/.next/static/chunks/app/test/layout-276ac73023152d33.js Should only have TEST constant

You can add one more page, one more constant to this file in which the constants are exported, and it will add all 3 constants to all 3 pages

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
  Available memory (MB): 32563
  Available CPU cores: 12
Binaries:
  Node: 18.18.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.0.0-canary.136 // Latest available version is detected (15.0.0-canary.136).
  eslint-config-next: N/A
  react: 19.0.0-rc-7771d3a7-20240827
  react-dom: 19.0.0-rc-7771d3a7-20240827
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Developer Experience, Instrumentation, Pages Router, TypeScript, SWC, Webpack

Which stage(s) are affected? (Select all that apply)

next build (local)

Additional context

This bug works from version 12 of nextjs (the maximum from which I tested) to v.14

It doesn’t matter app router or pages router, it works everywhere

SlimDaddy228 commented 1 month ago

It turned out that this is not a problem with the configuration of webpack5, which uses Next, but a feature of how tree shaking works in webpack5

If anyone is interested, I found an article that very clearly explains how it works, I advise you to read it

https://blog.theodo.com/2021/04/library-tree-shaking/

The solution that helped me is to split all exports into separate files, make an index file that exports from these files

As a result, I split the files that contained a lot of export const, export .. and so on, and made them into separate files for each constant, function, whatever.

Thanks to the modular approach using the index barrel file, I was able to achieve results of almost 3 times, and continue to improve these values further

You also need to include in packages.json - sideEffects: false

1.

Result:

github-actions[bot] commented 1 month ago

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

vercel / next.js