0

I have an application with next.js, I would like to make a code spliting to reduce my bundle and so that the pages are loaded on demand.

However I didn't find a way to do this seeing that I don't care my routes. As an example using react-router, where we can use dynamic imports on routes.

Does anyone know a solution for this?

Improve this question

2 Answers 2

Reset to default
1

Next.js handles this out of the box in the build step.

Each route that can exist as an entry point will be built to have a First Load version and a delta that will be loaded by the router.

You can try this locally by running yarn build && yarn start instead of yarn dev.

If you still want to split and dynamically load parts of your JS, you can check out Next's Dynamic Imports https://nextjs.org/docs/advanced-features/dynamic-import

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

There are a few more things you can do to improve Next.js performance:

  1. Select the right rendering mode
  2. Defer loading non-critical scripts to load when the page is idle
  3. Image Optimization with the Image component
  4. Code-splitting client-side code to reduce initial bundle size
  5. Server-side rendering with React Server components (Beta)
  6. Faster build times with SWC

I have written an article about that here with further details: https://medium.com/@szaranger/improving-next-js-performance-ad4a05c81888

Improve this answer

2 Comments

The article got deleted could you provide another one?
@Genie the link has been updated now

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.