Bundling
import A from './a'
export default function App(){
return <A />
}import B from './b'
export default function A(){
return <B />
}function App(){
return <A />
}
function A(){
return <B />
}
function B(){
return <Suspense>
{show && <C>}
</Suspense
}Bundle
index.js
a.js
const c = lazy(import('./c'))
export default function B(){
return <Suspense>
{show && <C>}
</Suspense
}b.js
function C(){
return <div>C</div>
}main.js
chunk-1.js
function App(){
return <A />
}
function App(){
return <A />
}
function A(){
return <B />
}
{
"name": "@fs/zion-user",
"sideEffects": false
}package.json
export {default as A} from './a'
export {default as B} from './b'
import {useState, lazy} from 'react'
const B = lazy(()=> import('./b'))
export default function A(){
const [show, setShow] = useState(false)
if(show) return <B />
return (
<button onClick={()=>setShow(true)}>
Show it
</button>
)
}import {useState, lazy} from 'react'
const B = lazy(()=> import('./b'))
export default function A(){
const [show, setShow] = useState(false)
if(show) return <B />
return (
<button onClick={()=>setShow(true)}>
Show it
</button>
)
}
function B(){
return <div>B</div>
}index.js
a.js
export default function B(){
return <div>B</div>
}b.js
function B(){
return <div>B</div>
}main.js
chunk-1.js
import {useState, lazy} from 'react'
const B = lazy(()=> import('./b'))
export default function A(){
const [show, setShow] = useState(false)
if(show) return <B />
return (
<button onClick={()=>setShow(true)}>
Show it
</button>
)
}
import {A} from 'pkg'
// Just import and render A
<A>app.js
deck
By Tyler Graf
