Using Suspense and lazy in Routes.tsx

Get Help and Help Others
1

According to the upgrade guide for redwood 6.0 ( Redwood v6.0.0 Upgrade Guide - Announcements / Releases and Upgrade Guides - RedwoodJS Community, the Router was refactored to use Suspense under the hood, which is neat, except I can’t seem to get it to work. I can see in the networks tab that unused pages are still being downloaded, with Routes.tsx as the initiator.

I’ve tried to do lazy/Suspense myself, but importing lazy inside of the Routes.tsx leads to the following error: ‘ReferenceError: Cannot access ‘lazy’ before initialization’.

What gives? And what do I do to utilize code-splitting inside my app?

2

Hi @Dysos, welcome to the community!

Code splitting is done automatically for you (if you do not explicit import the page in your Routes file)

See this section here: Router | RedwoodJS Docs

By default, the router will code-split on every Page, creating a separate lazy-loaded bundle for each. When navigating from page to page, the router will wait until the new Page module is loaded before re-rendering,

Hope this helps!