Why is Turbopack bundle size so FREAKING HUGE?? 4.6x larger than Webpack

[billnye2]

Summary

Build with webpack: 0.57 mb transferred --- 1.8 mb resources
Build with turbopack: 2.6mb transferred --- 8.4 mb resources

As recorded by Chrome dev tools network tab, filtered by js only. First page load.

Same exact codebase. Simply running "next build" vs "next build --webpack"

Turbopack is 4.6x larger??

There's gotta be something wrong here because this is atrocious.. please advise.

Additional information

No response

Example

No response

[icyJoseph]

You can, in your dev environment, use next@canary, and then run next experimental-analyze --serve - once again, in canary! then you should be able to see what Turbopack is bundling.

[billnye2]

Cool I am checking that now. Feature request for analyze mode: let us click the folders (gray bars) in the analyze UI and show the total bundle size under that folder. Right now it just says 0 B.

Also, please show stat vs parsed vs gzip sizes like the old bundle analyzer.

Also 2, we need to be able to zoom in like the old bundle analyzer

[icyJoseph]

Feedback thread: #86731

Consider that this is also an opportunity to do things better, and try to use the analyzer for what it is best, clearly identify why a given package ends up bundled, even across client server boundaries, gain knowledge of your app from a top level view, etc... Also remember that it hasn't landed as a stable, first version yet.

And please do return with some more info or screenshots! Would be nice to see if the analyzer can help with this kind of issue.

[billnye2]

I think I figured out what is happening and it might not be shown in the bundle analyzer. In the browser, turbopack is loading multiple js files (perhaps preloading other routes) with duplicate code/dependencies in these bundles. Not sure why. Example:

I have a Pages Router app. I use react-dropzone.

With webpack, the react-dropzone code is loaded in one bundle only: the _app-hash.js bundle.
With turbopack, the react-dropzone code is loaded in 11 bundles!! All 11 js files load on first page load. Is this expected behavior?

I am also seeing turbopack produces many more js files. These 11 files I mentioned above are eerily close in file size, and there are other clusters of js files that are also basically 1:1 clones of each other. All loaded on the first page load.

Is turbopack not optimized for Pages Router? I could see that being the reason.