우리 프로젝트에서는 빈번한 배포 프로세스를 따릅니다. 모든 배포에서 클라이언트는 브라우저 캐시 때문에 변경 사항을 반영하기 위해 브라우저를 새로 고쳐야합니다. 이 상황을 어떻게 피할 수 있는지 알고 싶습니다. 즉, 배포 할 때 새로 고침이 필요없는 모든 사용자 브라우저에 직접 반영되어야합니다. 이 문제를 해결하도록 도와주세요.모든 빌드에서 브라우저 새로 고침의 상황을 피할 필요가 있습니다.
기술적으로 브라우저에 직접 액세스 할 수 없으므로 브라우저 캐시를 새로 고침 할 수 없습니다. 할 수있는 일은 캐시 무효화입니다. 서버에 배포 할 때마다 js 및 css 파일 이름을 변경하십시오. 예
app_v1.js app_v2.js ...
및
app_v1.css의 app_v2.css위한
...
에서 이 방법은 브라우저를 배포 할 때마다 새로운 js 및 css 파일을 가져와야합니다.
자세한 내용은 핫 모듈 교체라는 해결책이있다이 링크
를 확인합니다. 이는 웹팩 번들을 완벽하게 대체합니다 (이미 사용하고 있다고 가정).
일부 참조는 What exactly is Hot Module Replacement in Webpack?을 참조하십시오. HMR 설정은 매우 복잡하며 각 프레임 워크마다 다릅니다.
webpack-dev-server도 webpack에 따라 다르지만 훨씬 간단합니다. 새로 고침 버튼이 자동으로 푸시됩니다.
브라우저 캐싱에 허용 된 캐시 기간을 줄이거 나 제거하려면 응답 헤더의 캐시 지정 문을 업데이트하는 것이 좋습니다.
귀하의 웹 사이트가 현재 사용하고있는 것을 보려면 '검사'옵션이 활성화되고 '네트워크'탭이 선택된 상태에서 Chrome이있는 페이지를 확인하십시오. 그런 다음 다운로드 한 파일을 선택하여 "응답 헤더"정보를 확인하십시오.
예를 들어,이 SO 페이지는 "max-age"값이 604800 (초, 7 일) 인 ados.js라는 스크립트 파일을 다운로드합니다. 그 시간은 웹 서버에서 최신 버전의 파일을 사용할 수 있는지 확인하기 전에 브라우저가 대기 할 수있는 시간입니다. 파일이 거의 변경되지 않으면 7 일이 지나치지 않을 수 있습니다.
그러나 7 일의 최대 사용 기간은 브라우저가 파일이 자주 변경되는 캐시 된 동적 상황에 대한 기간이 너무 오래있을 수 있습니다.
자세한 내용은이 MDN 페이지의 HTTP caching을 참조하십시오.
캐시 제어 지시문을 변경하는 것은 웹 서버에 따라 다릅니다. ASP.NET의 경우 web.config 파일에서 수행 할 수 있습니다.
고려해야 할 한 가지 옵션은 릴리스에 대한 2 단계 접근 방식입니다.
1 단계 : 보류 릴리스에 의해 업데이트 될 캐시 가능 파일의 릴리스 전에 캐시 제어 지시문을 캐시하지 않음으로 변경하십시오.
그런 다음 업데이트 된 파일의 현재 최대 보존 기간이 가장 긴 시간 동안 대기하십시오. 이렇게하면 현재 웹 사이트 브라우저가 "no cache"지시어를 가져올 수 있습니다. 그런 다음 현재 웹 사이트 브라우저는 모두 파일 업데이트가 릴리스 된 후 즉시 업데이트를 받기 시작했습니다.
2 단계 : 원하는 max-age 캐시 제어 명령을 사용하여 웹 사이트로 파일 업데이트를 릴리스하십시오. 이 업데이트는 1 단계에서 수행 한 작업으로 인해 즉시 선택해야합니다.
또 다른 옵션은 현재 최대 수명 값을 5 분과 같이 더 짧은 값으로 줄이는 것입니다. 이 옵션은 더 간단하지만 출시 후 5 분 동안 문제가 발생할 수 있습니다. 그러나 시간이 짧을수록 캐시 된 브라우저 파일의 업데이트 가능성 및 영향이 줄어 듭니다.
프런트 엔드에서 캐시를 무효화하여 캐시를 방지 할 수 있습니다.
v={{number-of-version}}을 추가 할 수 있습니다.로드 된 버전이 항상 원하는대로 표시됩니다.
빌드 단계에서 파일 버전을 관리하는 덤프 플러그인이 있으므로 수동으로하지 않아도됩니다. 편리하며 빌드 프로세스에서 쉽게 통합 할 수 있습니다. 여기에 링크가 있습니다 gulp-annotate
너무 넓습니다. 이것은 훌륭하게 들리지만 실제로 오버 헤드를 과도하게 증가시킵니다. 사용자에게 갑자기 변화하는 것도 좋은 생각이 아닙니다. 개발 또는 제작에 사용하고 있습니까? 코드 또는 매개 변수/텍스트를 변경하고 있습니까? –
현재 개발 용으로 만 사용합니다. 때로는 코드를 변경하는 경우도 있습니다. –