프론트엔드 개발 준비 - 성능 최적화 및 번들링 전략 수립하기

성능 최적화 전략

이미지 및 에셋 최적화 Lazy Loading: 화면 밖에 있는 이미지나 비디오 등은 스크롤하여 화면에 들어올 때 로드되도록 설정합니다. Responsive Images: 사용자의 디스플레이 크기와 해상도에 맞춘 이미지를 제공하여 로딩 시간과 대역폭 사용을 최적화합니다.
자바스크립트 및 CSS 최적화 코드 분할: 큰 자바스크립트 파일을 여러 개의 작은 파일로 분할하고, 사용자가 필요로 할 때만 로드하도록 합니다. 트리 쉐이킹: 미사용 코드를 제거하여 최종 번들의 크기를 줄입니다. 비동기 로딩: 스크립트를 비동기적으로 로딩하여 초기 로딩 시간을 단축합니다. CSS Minification: CSS 코드를 최소화하여 파일 크기를 줄이고, 비동기로 CSS를 로드하여 렌더링을 방해하지 않도록 합니다.
서버 및 호스팅 최적화 서버 사이드 렌더링 (SSR): 초기 페이지 로드 성능을 향상시키기 위해 서버 사이드에서 애플리케이션의 초기 상태를 렌더링합니다.

번들링 전략

번들러 선택 Webpack: 현재 가장 널리 사용되는 번들러로, 자바스크립트, CSS, 이미지 등 다양한 자산을 처리할 수 있습니다. 로더와 플러그인 시스템을 통해 기능을 확장할 수 있으며, 코드 분할, 레이지 로딩, 트리 쉐이킹 등의 기능을 지원합니다.
코드 분할 (Code Splitting) 동적 코드 분할: 필요할 때만 로드되는 코드 청크를 생성하여 초기 로드 시간을 줄입니다. 예를 들어, 특정 라우트나 사용자 인터랙션에 따라 필요한 코드만 로드할 수 있습니다. Webpack의 import() 문법을 사용하여 모듈을 동적으로 로드하거나 Rollup과 같은 도구를 이용하여 ES 모듈 기반의 코드 분할을 수행할 수 있습니다.
빌드 자동화 및 CI/CD 통합 CI/CD 파이프라인에 번들링 프로세스를 통합하여, 배포 과정에서 자동으로 코드 최적화 및 테스트를 수행합니다. 이는 일관된 품질 유지와 버그 감소에 기여합니다.

the-world-congress-project / .github