코드 스플리팅

<aside> 💡

JS 파일을 여러개로 나누고, 필요한 코드만 로드하는 기술

</aside>

동적으로 함수 로드

async function loadModule() {
  const { myFunction } = await import("./module.js");
  myFunction();
}

동적으로 리액트 컴포넌트 로드

// 1. 컴포넌트 로드
import React, { Suspense } from "react";

const LazyComponent = React.lazy(() => import("./LazyComponent"));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

// 2. 페이지 단위로 로드
import React, { Suspense } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

const Home = React.lazy(() => import("./pages/Home"));
const About = React.lazy(() => import("./pages/About"));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

Webpack에서 코드 스플리팅 사용하기

1. dependOn 옵션 사용하기

2. SplitChunksPlugin 사용

module.exports = {
  optimization: {
    splitChunks: {
      chunks: "all",
      minSize: 20000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      automaticNameDelimiter: "~",
      name: true,
    },
  },
};

트리 셰이킹

<aside> 💡

사용되지 않는 코드 제거

</aside>