Study_Develop/React

μ½”λ“œ μŠ€ν”Œλ¦¬νŒ… μ‚¬μš©ν•˜κΈ°

hiijihyun 2023. 8. 12. 16:43
λ°˜μ‘ν˜•

μ½”λ“œ μŠ€ν”Œλ¦¬νŒ… (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

 

μœ„μ— 정리가 ꡉμž₯히 잘 λ˜μ–΄μžˆκΈ°μ— μ €μž₯용 ..γ…Žγ…Ž