search

mrdotb / live_react

✨ React inside Phoenix LiveView with seamless end-to-end reactivity
https://live-react-examples.fly.dev/simple
MIT License
90 stars 8 forks source link

Add details about codesplitting #9

Open yasoob opened 2 months ago

yasoob commented 2 months ago

Hi!

I wonder if you have tackled or thought about code-splitting yet. It is kinda important to have some sort of code-splitting support. I want to use a react component only on one page but because of the way live_react and the default esbuild config is currently set up in Phoenix, everything is bundled in the App.js file.

In an ideal world, only the specific page that makes use of react will have a link to the react bundle.

mrdotb commented 2 months ago

Hello there is an example about lazy loading a component

https://live-react-examples.fly.dev/lazy

It could be documented with more detail :thinking:

I also made a TIL on this topic some time ago. https://mrdotb.com/tils/phoenix-1.7-config-esbuild-for-dynamic-import

yasoob commented 2 months ago

Ah I see. If I understand correctly though this does not split react itself from the main app.js and only bundles the React components separately as required. Is this understanding correct?

mrdotb commented 2 months ago

Correct. Every time you use a dynamic import it create a new chunk. I am not 100% sure if it's possible to load react with a dynamic import :thinking: It's probably possible to make it a dynamic import here but it's not the default config on the esbuild shipped with phoenix. https://github.com/mrdotb/live_react/blob/main/assets/js/live_react/hooks.js

https://esbuild.github.io/analyze/ Is very helpful to understand the different chunk and size.

I wrote this TIL some time ago about lazy loading in component https://mrdotb.com/tils/phoenix-1.7-config-esbuild-for-dynamic-import