프론트엔드 코드 스플리팅: 라우트 기반 및 컴포넌트 기반

// App.js
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./components/Home'));
const About = lazy(() => import('./components/About'));

function App() {
 return (
 
 로딩 중...

이 예제에서 Home과 About 컴포넌트는 React.lazy()와 동적 임포트를 사용하여 지연 로딩됩니다. Suspense 컴포넌트는 컴포넌트가 로드되는 동안 폴백(fallback) UI를 제공합니다. React Router는 내비게이션을 처리하고 현재 라우트를 기반으로 올바른 컴포넌트가 렌더링되도록 합니다.

예제 (Angular)

Angular에서는 지연 로딩 모듈을 사용하여 라우트 기반 코드 스플리팅을 구현합니다.

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
 { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
 { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) }
];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }

여기서 라우트 구성의 loadChildren 속성은 지연 로딩되어야 할 모듈의 경로를 지정합니다. Angular 라우터는 사용자가 해당 라우트로 이동할 때만 모듈과 관련 컴포넌트를 자동으로 로드합니다.

예제 (Vue.js)

Vue.js 또한 라우터 구성에서 동적 임포트를 사용하여 라우트 기반 코드 스플리팅을 지원합니다.

// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
 { path: '/', component: () => import('./components/Home.vue') },
 { path: '/about', component: () => import('./components/About.vue') }
];

const router = new VueRouter({
 routes
});

export default router;

라우트 구성의 component 옵션은 동적 임포트를 사용하여 컴포넌트를 비동기적으로 로드합니다. Vue Router는 라우트에 액세스할 때 컴포넌트의 로딩 및 렌더링을 처리합니다.

라우트 기반 코드 스플리팅의 장점

• 구현 용이성: 라우트 기반 코드 스플리팅은 특히 현대 프레임워크에서 제공하는 지원 덕분에 비교적 간단하게 구현할 수 있습니다.
• 명확한 관심사 분리: 각 라우트는 애플리케이션의 별개 섹션을 나타내므로 코드와 그 의존성에 대해 추론하기 쉽습니다.
• 대규모 애플리케이션에 효과적: 라우트 기반 코드 스플리팅은 많은 라우트와 기능을 가진 대규모 애플리케이션에 특히 유용합니다.

라우트 기반 코드 스플리팅의 단점

• 세분화 부족: 라우트 기반 코드 스플리팅은 여러 라우트에서 공유되는 복잡한 컴포넌트가 있는 애플리케이션에는 충분하지 않을 수 있습니다.
• 여전히 높은 초기 로드 시간: 라우트가 많은 의존성을 포함하는 경우 해당 라우트의 초기 로드 시간이 여전히 길 수 있습니다.

컴포넌트 기반 코드 스플리팅

컴포넌트 기반 코드 스플리팅은 애플리케이션 코드를 개별 컴포넌트 기반의 더 작은 청크로 분할하여 코드 스플리팅을 한 단계 더 발전시킵니다. 이 접근 방식은 코드 로딩에 대한 더 세분화된 제어를 가능하게 하며, 복잡한 UI와 재사용 가능한 컴포넌트가 있는 애플리케이션에 특히 효과적일 수 있습니다.

구현

컴포넌트 기반 코드 스플리팅 또한 동적 임포트에 의존하지만, 전체 라우트를 로드하는 대신 개별 컴포넌트를 필요에 따라 로드합니다. 이는 다음과 같은 기술을 사용하여 달성할 수 있습니다:

1. 컴포넌트 지연 로딩: 동적 임포트를 사용하여 컴포넌트가 처음 렌더링될 때나 특정 이벤트가 발생할 때와 같이 필요할 때만 로드합니다.
2. 조건부 렌더링: 사용자 상호작용이나 다른 요인에 따라 컴포넌트를 조건부로 렌더링하고, 조건이 충족될 때만 컴포넌트 코드를 로드합니다.
3. Intersection Observer API: Intersection Observer API를 사용하여 컴포넌트가 뷰포트에 표시될 때를 감지하고 그에 따라 코드를 로드합니다. 이는 초기에 화면 밖에 있는 컴포넌트를 로드하는 데 특히 유용합니다.

예제 (React)

import React, { Suspense, lazy } from 'react';

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

function App() {
 return (
 

 로딩 중...
}>