[angular] 빠른 초기 로딩 전략

26 Dec 2023

angular

Angular 앱을 개발하면서 초기 로딩 시간을 최적화하는 것은 중요합니다. 사용자가 앱을 빠르게 로딩하고 상호 작용할 수 있도록 하는 것이 사용성을 향상시키는 데 도움이 됩니다. 이 블로그 포스트에서는 Angular 앱의 초기 로딩 시간을 최적화하기 위한 몇 가지 전략을 살펴보겠습니다.

1. Lazy Loading

Angular에서 모듈을 lazy loading 하는 것은 초기 로딩 시간을 단축하는 데 도움이 됩니다. lazy loading을 사용하면 앱이 처음 시작될 때 필요한 모듈만 로드되고, 다른 모듈은 사용자가 필요로 할 때 비동기적으로 로드됩니다.

const routes: Routes = [
  { path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) },
  { path: 'profile', loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule) },
  // ...
];

2. Tree Shaking

Tree shaking은 앱에서 사용하지 않는 코드를 제거하여 번들 크기를 줄이는 최적화 기술입니다. Angular 앱에서 @angular-devkit/build-optimizer와 같은 도구를 사용하여 tree shaking을 수행할 수 있습니다.

ng build --prod

3. Ahead-of-Time (AOT) Compilation

AOT 컴파일은 앵귤러 앱을 빌드할 때 미리 코드를 컴파일하여 JIT 컴파일에 비해 성능을 향상시키고 앱의 로딩 시간을 단축합니다.

ng build --aot

이러한 전략을 사용하여 Angular 앱의 초기 로딩 시간을 최적화할 수 있습니다. 이는 사용자 경험을 향상시키고 사용자가 앱을 더 빠르게 시작할 수 있도록 도와줍니다.

참고 자료

이제 Angular 앱을 개발할 때 초기 로딩 시간을 최적화하는 데 도움이 되는 전략을 알게 되었습니다. 계속해서 이러한 전략을 적용하여 뛰어난 사용자 경험을 제공할 수 있도록 노력해 보세요!