First Load JS shared by all is rather heavy in next.js

user_10708471 0
Viewed 15366

I have a project on Next.js framework and the problem is that First Load JS shared by all pages is rather heavy.
I want to know what possible aspects I can take into consideration to reduce it and also know if I'm doing something wrongly.

my next js version : ^10.0.3

information relating to pages while building : enter image description here

next.js reactjs javascript
1 Answers

I would suggest installing @next/bundle-analyzer to get a better idea of what dependencies you're importing and which ones are contributing to that file size. This can help in identifying any unused or unnecessary libraries that could potentially be removed.

You can also look into using code splitting to reduce the bundle for the initial load of the application. This can be achieve by lazy loading code using dynamic import() and/or next/dynamic.

Furthermore, Next.js also mentions in their documentation other tools you can use to understand how much a dependency can add to your bundle.

(...) you can use the following tools to understand what is included inside each JavaScript bundle:

  • Import Cost – Display the size of the imported package inside VSCode.
  • Package Phobia – Find the cost of adding a new dev dependency to your project.
  • Bundle Phobia - Analyze how much a dependency can increase bundle sizes.
  • Webpack Bundle Analyzer – Visualize size of webpack output files with an interactive, zoomable treemap.
  • bundlejs - An online tool to quickly bundle & minify your projects, while viewing the compressed gzip/brotli bundle size, all running locally on your browser.

— Next.js, Going to Production, Reducing JavaScript Size

user_18707800
Related