번들, 캐시 및 사전 로딩 힌트

목표: 더 작은 번들을 제공하고 브라우저가 안전하게 캐시하도록 하세요.

• 콘텐츠 해시가 포함된 파일 이름
• 에셋에 대한 변경 불가 캐시
• HTML의 캐시 수명은 짧게 유지

• 파일 이름에 해시 적용: app.3f2a1.js
• Cache-Control: max-age=31536000, immutable
• HTML: 짧은 TTL(예: no-store 또는 몇 분)
• 거의 사용하지 않는 코드 분할

의도에 따라 미리 로드: 지연 로드할 청크를 일찍 가져와 다음 화면이 즉시 나타나는 것처럼 느껴지게 합니다.

이미지를 표시하기 전에 미리 로드하세요. 전환하면 캐시에서 즉시 나타납니다.

• 미리 로드: 곧 필요할 에셋에 높은 우선순위 부여
• 미리 가져오기: 나중에 필요할 가능성이 있는 에셋에 낮은 우선순위 부여
• 네트워크 경합을 피하려면 필요한 경우에만 사용

모든 것을 과도하게 미리 로드하지 마세요. 번들에는 콘텐츠 해시를 사용하고 변경 불가 캐시를 설정하세요. 새 해시가 빠르게 배포되도록 HTML의 캐시 수명은 짧게 유지하세요.

복습: 번들 파일 이름에 해시를 넣고 장기간 캐시하십시오. HTML은 짧은 기간만 캐시하고, 적절한 preload/prefetch를 사용하여 다음 화면이 즉시 표시되는 것처럼 느껴지게 하십시오.