Webpack, 파일 캐시에 효과적으로 해시가 필요한 이유는 무엇입니까?

Question

https://webpack.github.io/docs/long-term-caching.html에서

,

첫 번째 단락은 자신의 URL에 해시 또는 버전이 있어야합니다,

효과적으로 파일을 캐시하려면 말한다.

브라우저에서 파일을 장기간 캐시 할 수있게 해주는 해시/버전 URL의 목적은 무엇입니까?

Answer 1

보통 클라이언트가이 파일의 최신 버전을로드하지 않기 때문에 가까운 장래에 변경 될 수있는 파일을 캐시하는 것은 좋지 않습니다. 따라서 bundle.js을 캐싱하면 코드를 업데이트 한 후 일부 캐싱 설정으로 인해 브라우저에 이전 bundle.js이로드되는 문제가 발생할 수 있습니다.

웹 팩을 사용할 때 사용하기 쉬운이 문제를 해결하는 좋은 방법은 결과 번들을 해시하고이 해시를 파일 이름에 추가하는 것입니다. 따라서 첫 번째 버전은 bundle.ad736defe.js이고 수정 후이 이름도 변경됩니다 (예 : bundle.dffe3983.js). 이 작업을 완료하면 코드를 변경할 때마다 새로운 파일 이름이 생기므로 클라이언트는 index.html에서 정확히 동일한 파일을 참조하는 한 캐시 된 파일을 사용하므로 파일을 영원히 캐시 할 수 있습니다. 번들의 컨텐츠에 영향을주는 모든 것을 변경하자 마자 새 버전을 다운로드하십시오.

Webpack에는 [hash] 패턴을 포함하는 출력 파일 이름을 제공하여 매우 쉽게 활성화 할 수있는 기능이 내장되어 있습니다.

output: { 
    path: path.resolve(__dirname, "dist"), 
    publicPath: "/", 
    filename: "bundle-[hash].js" 
} 

이렇게하면 해시 번들이 dist/bundle.<calculated_hash>.js이됩니다.

미리 파일 이름을 모르는 경우 올바른 해시가 포함 된 스크립트 태그가 자동으로 삽입되는 HtmlWebpackPlugin을 사용할 수 있습니다.