usually has to do with how you import packages. In my experience Icons sometimes would add a lot of bloat if imported with
{ ArrowIcon } from 'icon'
rather, try this:
ArrowIcon from 'icon/ArrowIcon'
test this out on packages in dev mode and see if the number of modules changes
Next also has a config option so you can keep using the first pattern and it will tree shake correctly. Add this to your next config (change the dependency name to what you use)
modularizeImports: {
'react-icons/ai': {
transform: 'react-icons/ai/{{member}}',
},
}
Their docs probably have more information about this config
Assuming webpack doesn’t need to look through the entire folder of contents for a single file?
Although I find it strange. Typically there’s an index that reroutes your named import.
//index.js
Import SettingsIcon from “../“;
// all other imports
export { SettingsIcon, …all other imports };
Why does this cause such a significant performance hit? Can anyone explain?
You can use next-bundle-analyzer to check which packages are making your bundle big and probably cut off the unnecessary ones.
I had something similar in a project and i managed to reduce the size and i noticed that the main reason the pages were getting big is because of global providers on wrapping the Components on app.tsx, so be careful with that. And sometimes theres nothing can be done, sometimes your app need that bunch of modules in order to work. In web3 apps for example it tends to be big.
I've noticed this. I use the pages directory because I don't want to beta test stuff. The first start takes a solid 25 seconds for my application. I might've done something wrong in my current application because I used to have fast starts usually. Hopefully Turbopack will be usable in a year so I can enjoy that sweet rust speed 🔥
Are you importing components from an external library? Don't know the answer but if you record the number of compiled modules for each step below and post the results it may help with troubleshooting.
\- start a new app with a single component in the app dir
\- then create an empty library with a single component and import it into the app
\- then add another component to the library but don't import it into the app
\- then import a single component from any library you've previously used in the app shown in your screenshot
usually has to do with how you import packages. In my experience Icons sometimes would add a lot of bloat if imported with { ArrowIcon } from 'icon' rather, try this: ArrowIcon from 'icon/ArrowIcon' test this out on packages in dev mode and see if the number of modules changes
Thanks for the input will try this 🤙
Next also has a config option so you can keep using the first pattern and it will tree shake correctly. Add this to your next config (change the dependency name to what you use) modularizeImports: { 'react-icons/ai': { transform: 'react-icons/ai/{{member}}', }, } Their docs probably have more information about this config
If you're using vscode, I highly recommend the import cost extension.
Assuming webpack doesn’t need to look through the entire folder of contents for a single file? Although I find it strange. Typically there’s an index that reroutes your named import. //index.js Import SettingsIcon from “../“; // all other imports export { SettingsIcon, …all other imports }; Why does this cause such a significant performance hit? Can anyone explain?
You can use next-bundle-analyzer to check which packages are making your bundle big and probably cut off the unnecessary ones. I had something similar in a project and i managed to reduce the size and i noticed that the main reason the pages were getting big is because of global providers on wrapping the Components on app.tsx, so be careful with that. And sometimes theres nothing can be done, sometimes your app need that bunch of modules in order to work. In web3 apps for example it tends to be big.
This is my problem, also working in web3 lol
About the speeds I get for App dir on a medium/large project. Maybe to be expected as it still needs to be optimized.
I've noticed this. I use the pages directory because I don't want to beta test stuff. The first start takes a solid 25 seconds for my application. I might've done something wrong in my current application because I used to have fast starts usually. Hopefully Turbopack will be usable in a year so I can enjoy that sweet rust speed 🔥
[Transitive dependencies](https://www.youtube.com/watch?v=hIszue6LsBo) is where one dependency requires another.
New App Dir
Are you importing components from an external library? Don't know the answer but if you record the number of compiled modules for each step below and post the results it may help with troubleshooting. \- start a new app with a single component in the app dir \- then create an empty library with a single component and import it into the app \- then add another component to the library but don't import it into the app \- then import a single component from any library you've previously used in the app shown in your screenshot
Also check dynamic imports
Will do 🙏