📚 Reference

공식 문서 1

📜 Chapter

‣

‣

‣

React - 성능 최적화

Vue.js - 성능 최적화

Front-end 성능 최적화

‣

이미지 최적화

이미지 최적화

Next.js의 Image 컴포넌트 사용

next/image를 사용하면 이미지 크기 조정, WebP 변환, 지연 로드(Lazy Loading)등을 통해 성능을 최적화할 수 있다.
```
import Image from 'next/image';

<Image src="/example.jpg" alt="Example" width={800} height={600} />
```
외부 이미지 최적화 설정: 외부 이미지를 사용할 경우 next.config.js에서 images.domains 설정을 추가한다.
```
module.exports = {
  images: {
    domains: ['example.com'],
  },
};
```

Code splitting과 Dynamic import

Code splitting
Dynamic import
Dynamic import 사용
next/dynamic
자주 사용되지 않는 컴포넌트나 라이브러리를 동적으로 로드하여 초기 번들 크기를 줄인다.

import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('./DynamicComponent'));