Frontend Academy · 강의

코드 분할과 지연 로드 라우트

동적 import()로 라우트 경계에서 번들을 분할하고 React 및 Vue 컴포넌트를 지연 로드하며, 빌드 출력에서 청크 크기를 모니터링합니다.

코드 분할과 지연 로드 라우트은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

코드 분할이 필요한 이유

단일 JavaScript 번들은 앱의 모든 코드를 모든 방문자가 다운로드하게 만듭니다. 방문자가 사용하지 않는 기능의 코드도 포함됩니다. 코드 분할을 사용하면 번들을 필요할 때 로드하는 여러 청크로 나눌 수 있습니다.

동적 import()

import('./module')은 모듈로 확인되는 Promise를 반환합니다. 번들러(Vite, webpack)는 이를 인식하고 런타임에 로드되는 별도의 청크를 생성합니다.

// Without split — entire heavy lib in main bundle:
import { generateChart } from 'heavy-chart-lib';

// With split — loaded only when needed:
button.addEventListener('click', async () => {
  const { generateChart } = await import('heavy-chart-lib');
  generateChart(data);
});

React.lazy() — 컴포넌트 수준 분할

React.lazy(() => import('./Heavy'))는 처음 렌더링될 때만 코드를 로드하는 컴포넌트를 생성합니다. 로드하는 동안 대체 화면을 표시하려면 <Suspense>로 감싸십시오.

import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./Dashboard'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Dashboard />
    </Suspense>
  );
}

React Router의 경로 기반 분할

각 경로에 고유한 청크가 할당되므로 사용자는 방문하는 페이지에 필요한 코드만 다운로드합니다.

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { lazy, Suspense } from 'react';

const Home    = lazy(() => import('./pages/Home'));
const Profile = lazy(() => import('./pages/Profile'));
const Admin   = lazy(() => import('./pages/Admin'));

const router = createBrowserRouter([
  { path: '/',        element: <Suspense fallback={<Spinner/>}><Home /></Suspense> },
  { path: '/profile', element: <Suspense fallback={<Spinner/>}><Profile /></Suspense> },
  { path: '/admin',   element: <Suspense fallback={<Spinner/>}><Admin /></Suspense> }
]);

Vue 3 비동기 컴포넌트

Vue는 같은 패턴을 위해 defineAsyncComponent를 제공합니다.

import { defineAsyncComponent } from 'vue';

const Dashboard = defineAsyncComponent(() =>
  import('./Dashboard.vue')
);

// Use in template like a normal component

Vue Router 지연 경로

Vue Router는 경로 정의에서 동적 가져오기를 지원하므로 경로마다 청크가 생성됩니다.

const routes = [
  { path: '/',        component: () => import('./pages/Home.vue') },
  { path: '/profile', component: () => import('./pages/Profile.vue') },
  { path: '/admin',   component: () => import('./pages/Admin.vue') }
];

Webpack 매직 주석

가져오기 문 안의 webpack '매직 주석'을 통해 청크 이름과 미리 가져오기 동작을 지정할 수 있습니다.

const Profile = lazy(() =>
  import(/* webpackChunkName: "profile", webpackPrefetch: true */ './Profile')
);

// Vite supports a subset; @vite-ignore for special cases

미리 가져오기와 미리 로드

미리 가져오기: 다음에 방문할 가능성이 높은 경로를 위해 유휴 시간에 청크를 다운로드합니다. 미리 로드: 현재 경로의 핵심 청크를 위해 높은 우선순위로 지금 다운로드합니다. 링크에 마우스를 올렸을 때는 미리 가져오기를 사용하고, 곧 필요할 것이 확실한 경우에는 미리 로드를 사용하십시오.

번들 분석기

rollup-plugin-visualizer(Vite) 또는 webpack-bundle-analyzer를 사용하여 청크 크기를 시각화합니다. 지나치게 큰 청크, 중복된 종속성, 트리 셰이킹을 잊은 라이브러리를 확인하십시오.

// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer';

export default {
  plugins: [visualizer({ open: true, gzipSize: true })]
};

벤더 청크 분할

타사 라이브러리를 별도의 벤더 청크로 분할하면 앱 코드보다 변경 빈도가 낮아집니다. 따라서 브라우저가 배포가 이루어져도 해당 청크를 캐시에 유지할 수 있습니다.

// vite.config.ts
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react', 'react-dom'],
          ui: ['@radix-ui/react-dialog', '@radix-ui/react-tooltip']
        }
      }
    }
  }
};

분할하지 않을 때(NOT)

20KB 미만의 작은 청크는 도움이 되기보다 손해가 큽니다. HTTP 추가 부담이 번들 용량 절감 효과를 초과하기 때문입니다. 모든 컴포넌트를 분할하지 말고, 경로 경계와 실제로 무거운 기능을 기준으로 분할하십시오.

빠른 확인

React의 lazy() 래퍼는 올바르게 렌더링하려면 무엇과 함께 사용해야 합니까?

복습: 코드 분할

동적 import()는 별도의 청크를 생성합니다. 컴포넌트 분할에는 React.lazy와 Suspense를 사용합니다. React Router와 Vue Router에서는 경로 컴포넌트를 지연 로드합니다. 다음에 필요할 가능성이 높은 청크에는 미리 가져오기를 사용하고, 핵심 청크에는 미리 로드를 사용합니다. 번들 분석기로 낭비되는 부분을 확인할 수 있습니다. 캐시 효율을 위해 벤더 라이브러리를 분할합니다. 20KB 미만의 초소형 청크는 피하십시오.

자주 묻는 질문

“코드 분할과 지연 로드 라우트” 강의는 무료인가요?

네 — “코드 분할과 지연 로드 라우트” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“코드 분할과 지연 로드 라우트”에서 뭘 배우나요?

동적 import()로 라우트 경계에서 번들을 분할하고 React 및 Vue 컴포넌트를 지연 로드하며, 빌드 출력에서 청크 크기를 모니터링합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Frontend Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“코드 분할과 지연 로드 라우트” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Frontend Academy(으)로 돌아가기