📚 Reference

공식 문서 1

📜 Chapter

‣

‣

‣

성능 최적화 - React

성능 최적화 - Vue.js

Front-end 성능 최적화, 빌드 최적화

@next/bundle-analyzer

‣

빌드 최적화

이미지 최적화

이미지 최적화

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