[Question/Help]: Suspense/lazy with reason-react
helabenkhalfallah opened this issue · comments
Hello,
I start with Reason for my Frontend applications.
I would like to know if the suspense/Lazy mechanism is also available with Reason? Or an equivalent mechanism to split by routes and components? Or to split the bundle?
Thank you so much for your precious help. 💯
Thanks for opening this issue. I haven't used Lazy in a long time but I remember @jchavarri did, the repo lives here: https://github.com/jchavarri/reason-react-lazy-loading
The trick is to bind the import like https://github.com/jchavarri/reason-react-lazy-loading/blob/master/src/LazyImport.re and do some shenanigans to make it work: https://github.com/jchavarri/reason-react-lazy-loading/blob/master/src/PdfPreviewLazy.re
This unlocks the possibility to lazy load components, but now with Melange we might want to improve this.
Thank you so much @davesnx for your answer.
It’s very useful! 💯
Hello,
I tried to use here:
- https://github.com/helabenkhalfallah/frontend-web-benchmarks/blob/main/reason-ml-frontend/src/LazyImport.re
- https://github.com/helabenkhalfallah/frontend-web-benchmarks/blob/main/reason-ml-frontend/src/routes/Router.re#L7
- https://github.com/helabenkhalfallah/frontend-web-benchmarks/blob/main/reason-ml-frontend/src/pages/ProductListPageLazy.re
However, when running webpack-bundle-analyzer or building for production (using webpack), I still have a single bundle instead of having a separated chunk :
For a project written with React and JS, when a route is Lazy Loaded, I get a separated chunk:
Thank you for your help :) :)
Aha I fixed my issues :
Here is my project:
https://github.com/helabenkhalfallah/frontend-web-benchmarks/tree/main/reason-ml-frontend/src
Thank you so much for your help 🥇
Sounds amazing. Feel free to join our Discord: https://discord.gg/reasonml to have those issues resolved faster :)