look at the client.html generated by the bundle analyzer
Current vs. Expected behavior
The bundle size should be optimized but that's not the case
Provide environment information
Operating System:
Platform: win32
Arch: x64
Version: Windows 11 Enterprise
Available memory (MB): 14274
Available CPU cores: 8
Binaries:
Node: 18.18.0
npm: N/A
Yarn: N/A
pnpm: N/A
Relevant Packages:
next: 14.2.3 // There is a newer version (14.2.4) available, upgrade recommended!
eslint-config-next: 14.2.3
react: 18.3.1
react-dom: 18.3.1
typescript: 5.4.5
Next.js Config:
output: N/A
⚠ There is a newer version (14.2.4) available, upgrade recommended!
Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
Read more - https://nextjs.org/docs/messages/opening-an-issue
Which area(s) are affected? (Select all that apply)
create-next-app, Performance, Webpack
Which stage(s) are affected? (Select all that apply)
When building the app with the bundle analyzer, under certain conditions the Icon.tsx chunk (in the client.html) has a huge parsed size (to better view the chunk choose the "Stat" view).
Here's the explanation:
You can find in the code an Icon.tsx component that looks like this:
However, when at least another client component that is importing Icon.tsx is used anywhere in the app, the bundle analyzer shows that the Icon.tsx chunk is not optimized at all (stat size: 195kB / parsed size: 168kB).
Link to the code that reproduces this issue
https://github.com/pepew-le-boss/nextjs-bundle-size-icon-component
To Reproduce
readme.md
client.html
generated by the bundle analyzerCurrent vs. Expected behavior
The bundle size should be optimized but that's not the case
Provide environment information
Which area(s) are affected? (Select all that apply)
create-next-app, Performance, Webpack
Which stage(s) are affected? (Select all that apply)
next build (local)
Additional context
Repo here: https://github.com/pepew-le-boss/nextjs-bundle-size-icon-component
When building the app with the bundle analyzer, under certain conditions the Icon.tsx chunk (in the client.html) has a huge parsed size (to better view the chunk choose the "Stat" view). Here's the explanation:
You can find in the code an Icon.tsx component that looks like this:
Then it can be used like this:
When used is server components, there are no problems.
When imported in a client component, a chunk
Icon.tsx
is created with an optimized parsed size (stat size: 195kB / parsed size: 1kB).For example:
And then used like this:
However, when at least another client component that is importing
Icon.tsx
is used anywhere in the app, the bundle analyzer shows that theIcon.tsx
chunk is not optimized at all (stat size: 195kB / parsed size: 168kB).For example:
Is it a normal behavior ? Is there a way to fix that ?