μ½λ μ€ν리ν μ¬μ©νκΈ°
μ½λ μ€ν리ν (code splitting) ?
νμ΄μ§κ° λ‘λ λ λ, λΆνμν μ»΄ν¬λνΈλ λΆλ¬μ€μ§ μκ³ νμν μ»΄ν¬λνΈλ€λ§ λΆλ¬μ€λλ‘ νλ κΈ°λ².
리μ‘νΈμμλ μ μ©μ΄ λμ§λ§, μΉν©(webpack)μ μ΄μ©ν λ€λ₯Έ μ΄ν리μΌμ΄μ μμλ λͺ¨λ μ¬μ© κ°λ₯νλ€.
μΉν©λ κ°λ¨ μ€λͺ νμλ©΄, μ΄ν리μΌμ΄μ μ λͺ¨λ νμΌλ€μ λ¬Άκ³ μμΆνμ¬ νλμ κ²°κ³Όλ¬Όλ‘ λ§λ€μ΄μ£Όλ μΉκ°λ° λꡬμ΄λ€.
μλ°μ€ν¬λ¦½νΈλ‘ κ°λ°νκ³ λ°°ν¬νλ κ³Όμ μμ λΉλ(build)κ³Όμ μ κ±°μΉκ² λλλ°, μ΄ κ³Όμ μμ λͺ¨λ νμΌλ€μ΄ νλλ‘ ν©μ³μ§κ² λλ€. μ°λ¦¬κ° index.js, componentsλ€λ‘ λλ΄λ μμ€ μ½λλ€μ΄ νλλ‘ ν©μ³μ§κ² λλ€. κ°λ¨ν νλ‘μ νΈλΌλ©΄ μν₯μ΄ μ κ² μ§λ§, κ±°λν νλ‘μ νΈλΌλ©΄(νΉν spaνμ΄μ§μμ) κΈΈκ³ λ§μ jsμ½λκ° νμνλ€. μ΄ κ²½μ° μΈν°λ· νκ²½μ΄ μ’μ§ λͺ»ν κ³³μμλ κ±°λν μμ€μ½λλ€μ λΆλ¬μ€λλ° μλΉν λ‘λ© μκ°μ κ°κ²λλ€. μ΄λ₯Ό κ°μ νκ³ μ μ½λμμ λΉμ₯ μ¬μ©νλ λΆλΆλ§ λ‘λ©νκ³ , νμ¬ νμ€νμ§ μμ μ½λ λΆλΆμ λ°λ‘ λΆλ¦¬μμΌ λμ€μ λ‘λν¨μΌλ‘μ¨ λ‘λ©μκ°μ κ°μ νλ κ²μ΄ μ½λ μ€ν리ν μ΄λ€.
κ·Έλμ μ΄λ€ μ»΄ν¬λνΈλ€μ λΆλ¦¬ν μ§ κ³ λ―Όμ΄ λ§μμ§.
κ·Έλμ μ΄λ€ κΈ°μ€μΌλ‘ νλ©΄ μ’μκΉ?
- νμ΄μ§λ€μ λΆλ¦¬ν¨.
- μλ²μ¬μ΄λλ λλ§μ΄ νμ μλ μ λ€μ κΈ°μ€μΌλ‘ λΆλ¦¬ν¨.
npm i @loadable/component
npm i --save-dev @types/loadable__component
-> react μ ν리μΌμ΄μ μμ μ½λ λΆν μ νμ±ν νλ€.
App.tsx>
import loadable from '@loadable/component';
const LogIn = loadable(()=> import( '@pages/Login'));
const SignUp = loadable(()=> import( '@pages/SignUp'));
μλ κ² νμ΄μ§λ₯Ό κΈ°μ€μΌλ‘ λΆλ¦¬λ₯Ό νμ.
μ½λ λΉλκΈ° λ‘λ©
λ λμ μ¬μ©μ μν΄ μ½λλ₯Ό λΉλκΈ°μ μΌλ‘ μ½λ©νλ λ°©λ²μ΄ μλλ°, μ½λ λΉλκΈ° λ‘λ©μ λνμ μΈ μμκ° μ½λ μ€ν리ν μ΄λ€.
κΈ°λ³Έμ μΌλ‘ js ν¨μλ import()ν¨μλ₯Ό ν΅ν΄μ λΆλ¦¬ν μ μλ€. import()ν¨μ ννλ‘ λ©μλ μμμ μ¬μ©νκ² λλ©΄ νμν λ ν΄λΉ μ€ν¬λ¦½νΈλ₯Ό λΆλ¬μμ μ¬μ©ν μ μκ² λλ€.
ν¨μλ₯Ό μ½λμ€ν리ν ν΄λ³΄κΈ°
// src/notify.js
const notify = () => {
window.alert("μ’
μ리 μΈλ €λΌ");
};
export default notify;
// src/App.js
import "./App.css";
import notify from "./notify";
function App() {
const handleClick = () => {
notify();
};
return (
<div className="App">
<button onClick={handleClick}>Click!</button>
</div>
);
}
export default App;
κ·ΈλΌ Appμμ μ λ²νΌμ λλ₯΄λ©΄ alertμ΄ μ μλν κ²μ΄λ€.
κ·Όλ° μ¬μ€ μ λ²νΌμ ν΄λ¦νκΈ° μ κΉμ§λ notifyλ νμ μλ μ½λμ΄λ€.
μ΄λ μ½λ μ€ν리ν μ μ μ©νμ¬, μ§κΈ λΉμ₯ νμνμ§ μμ μ½λλ₯Ό λΆλ¦¬μμΌλ³΄μ.
import "./App.css";
function App() {
const handleClick = () => {
import("./notify").then(({ default: notify }) => {
notify();
});
};
return (
<div className="App">
<button onClick={handleClick}>Click!</button>
</div>
);
}
export default App;
import λ¬Έμ μ½λ λΈλ‘ μλλ‘ λ΄λ Έλ€.
μ΄λ import λ Promiseλ₯Ό λ°ννκ² λλ€.
μ΄κ²μ λ°λ²¨ stage-3λ¨κ³μ μλ dynamic importλΌλ λ¬Έλ²μ΄λ€.
νμ¬λ webpackμμ μ§μμ€μ΄λΌ μ€μ μμ΄ λ°λ‘ μ¬μ©κ°λ₯
μ΄ ν¨μλ λͺ¨λμ λΉλκΈ°μ μΌλ‘ Common JSννλ‘ λΆλ¬μμ λ°λ‘ defaultλ₯Ό λͺ μν΄μ£Όμ΄μΌ ν¨.
μ΄λ κ² νκ³ λμ, κ°λ°μ λꡬμμ Networkνμ μ΄μ λ€μμ, λ²νΌμ λλ¬λ³΄μλΌ.
κ·Έλ¬λ©΄ λ€μκ³Ό κ°μ΄ 1.chunk.jsλΌλ νμΌμ λΆλ¬μ€κ² λκ³ , κ·Έ μμ notifyκ΄λ ¨ μ½λκ° λ€μ΄μλ κ²μ νμΈν μ μλ€.
μ΄λ κ² λΆλ¦¬λ νμΌμ μ²ν¬νμΌ μ΄λΌκ³ νλ€.
https://velog.io/@velopert/react-code-splitting
리μ‘νΈ νλ‘μ νΈ μ½λ μ€ν리ν μ 볡νκΈ°
μ½λ μ€ν리ν , λ λ³κ±°μλμ? κ·Έλ₯ μΉν©μμ νλΌλλλ‘ νλ©΄ λλκ±Έμ. νμ§λ§! 리μ‘νΈμμ μ½λ μ€ν리ν μ΄λ μλ²μ¬μ΄λ λ λλ§μ ν¨κ» ν΄λ³΄μ κ²½νμ΄ μμΌμλ€λ©΄, μ΄ λκ°μ§ μμ μ ν¨κ»
velog.io
μμ μ λ¦¬κ° κ΅μ₯ν μ λμ΄μκΈ°μ μ μ₯μ© ..γ γ