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

by

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

More Related Contents:

  1. Window is not defined in Next.js React app
  2. “Cannot use import statement outside a module” error when importing react-hook-mousetrap in Next.js
  3. Can’t build React/Next project – found page without a React Component as default export (context api file)
  4. In React and Next.js constructor, I am getting “Reference Error: localstorage is not defined”
  5. Warning: Function components cannot be given refs
  6. Error: How to serialize data from getStaticProps : Next.js
  7. Environment variables not working (Next.JS 9.4.4)
  8. Next.js context provider wrapping App component with page specific layout component giving undefined data
  9. I can’t reference an image in Next.js
  10. unable to deploy next js to azure
  11. How to Set port in next.js
  12. What is the best way to have a fallback image in NextJS?
  13. Next.js: Error: React.Children.only expected to receive a single React element child
  14. Custom _app and _document get ignored when moving files to src/pages folder in Next.js
  15. how can I use top level “await” in typescript next.js
  16. You’re importing a component that needs useState. It only works in a Client Component, but none of its parents are marked with “use client”
  17. TypeError: Cannot read properties of undefined (reading ‘call’) on Next.js
  18. How to prevent Next.js from instantiating a singleton class/object multiple times?
  19. Next.js app folder: is there some “entry point”? A direct replacement for _app.tsx?
  20. How to avoid caching in the app directory of Next.js?
  21. How to fetch data server-side in the app directory of Next.js? Tried getStaticProps but it’s returning undefined
  22. Want to have an event handler for the browser’s back button with next.js
  23. Next.js, getStaticProps not working with component but does with page
  24. Arrow function without curly braces
  25. Reactjs setState() with a dynamic key name?
  26. ReactJS – .JS vs .JSX
  27. TypeError: Cannot read property ‘setState’ of undefined
  28. Is this the correct way to delete an item using redux?
  29. Cleaner/shorter way to update nested state in Redux?
  30. Importing CSS files in Isomorphic React Components

Leave a Comment