search

rturnq / solid-router

A router for solid-js
MIT License
42 stars 1 forks source link

[Feature request] async/lazy load route #23

Closed beckend closed 3 years ago

beckend commented 3 years ago

for codesplitting.

rturnq commented 3 years ago

Can you elaborate what you are looking for from this feature? Solid currently supports lazy loading components and this works today with the router and to code split with popular build tools.

beckend commented 3 years ago

Oh, can you show some concrete code using this router?

beckend commented 3 years ago

I am talking about dynamic import statement, so if it's a big component, the bundles will be split.

rturnq commented 3 years ago

You can read more about lazy, Suspense and transitions in the Solid docs, but here is a simple example that shows how they can be used with the router: https://codesandbox.io/s/solid-router-lazy-rgkjh

Essentially, you will import your component using a dynamic import via Solid's lazy function. Then you can just use them a routes and they will load when the route is made active the first time. Wrapping your routes (usually the root most) in a suspense boundary will let you have nice transitions while waiting for the next route to load. Obviously this requires your bundler to handle the actual code-splitting on dynamic imports but that is pretty standard.

beckend commented 3 years ago

Ok thanks for your time to comment!