,Webpack, 파일 캐시에 효과적으로 해시가 필요한 이유는 무엇입니까?
첫 번째 단락은 자신의 URL에 해시 또는 버전이 있어야합니다,
효과적으로 파일을 캐시하려면 말한다.
브라우저에서 파일을 장기간 캐시 할 수있게 해주는 해시/버전 URL의 목적은 무엇입니까?
,Webpack, 파일 캐시에 효과적으로 해시가 필요한 이유는 무엇입니까?
첫 번째 단락은 자신의 URL에 해시 또는 버전이 있어야합니다,
효과적으로 파일을 캐시하려면 말한다.
브라우저에서 파일을 장기간 캐시 할 수있게 해주는 해시/버전 URL의 목적은 무엇입니까?
보통 클라이언트가이 파일의 최신 버전을로드하지 않기 때문에 가까운 장래에 변경 될 수있는 파일을 캐시하는 것은 좋지 않습니다. 따라서 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을 사용할 수 있습니다.
감사합니다. 나는'chunkhash'없이 JS 파일을 배포 했으므로 꽤 위험하다고 생각합니다. 내'bundle.js' 파일 크기가 변경되면 어떻게 될까요? 브라우저가 파일이 변경되었음을 감지 할 수 있으며 새 버전을 다운로드해야합니까? – Max
파일을 전송할 때 서버가 브라우저에 알려주는 더 긴 캐싱 설정을 구성한 경우에만 위험합니다. 이러한 설정을 사용하면 브라우저는 더 이상 같은 이름의 파일을 다운로드하지 않습니다. 따라서 파일 크기가 변경된 경우에도 서버에 묻지 않습니다. 해시를 사용하고 파일 크기가 변경되면 새 해시를 받게됩니다. 해싱없이 시작한 후에 나중에 이것을 소개하는 데는 문제가 없습니다. –