우리 프로젝트에서는 빈번한 배포 프로세스를 따릅니다. 모든 배포에서 클라이언트는 브라우저 캐시 때문에 변경 사항을 반영하기 위해 브라우저를 새로 고쳐야합니다. 이 상황을 어떻게 피할 수 있는지 알고 싶습니다. 즉, 배포 할 때 새로 고침이 필요없는 모든 사용자 브라우저에 직접 반영되어야합니다. 이 문제를 해결하도록 도와주세요.모든 빌드에서 브라우저 새로 고침의 상황을 피할 필요가 있습니다.
답변
기술적으로 브라우저에 직접 액세스 할 수 없으므로 브라우저 캐시를 새로 고침 할 수 없습니다. 할 수있는 일은 캐시 무효화입니다. 서버에 배포 할 때마다 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
- 1. ASP.Net 새로 고침의 GridView
- 2. 어디에서 조인해야합니까? 반복되는 행을 피할 필요가 있습니다.
- 3. 페이지 새로 고침의 filtertoolbar에서 검색하지 않습니다
- 4. 페이지로드 및 페이지 새로 고침의 값 차이점
- 5. Materialized View에서 완전 새로 고침과 빠른 새로 고침의 차이점은 무엇입니까?
- 6. 메타 새로 고침의 내용을 변경해도 새로 고침 시간이 변경되지 않습니다.
- 7. 이러한 특정 상황을 피할 수 있습니까?
- 8. xPages 부분 새로 고침의 사용자 지정 컨트롤에 자바 스크립트 리소스로드
- 9. 사파리에서 상수 페이지 새로 고침의 원인을 찾는 방법은 무엇입니까?
- 10. 싱글 톤 패턴을 피할 필요가 있습니까?
- 11. codeginiter 리디렉션 기능에서 위치와 새로 고침의 차이점은 무엇입니까?
- 12. 피할 필요가 삽입 서브 클래스 엔티티 프레임 워크
- 13. xcode를 실행하는 앱의 상황을 어떻게 피할 수 있습니까?
- 14. 양식을 브라우저 새로 고침
- 15. 2 DB에서 DB 내용을 병합하는 경우 비정품 문자열 닮기를 피할 필요가 있습니다
- 16. 피할 방법 속성 집합에 새로 고침
- 17. 서버에 데이터를 업로드하고 알림 표시 줄에 진행 상황을 표시 할 필요가 있습니다. android
- 18. 다른 탭에서 브라우저 페이지를 새로 고침 할 수 있습니다.
- 19. angular 2 필요하지 않을 때 양방향 databind를 피할 필요가 있습니까?
- 20. 사용자의 브라우저 새로 고침 동기화
- 21. 배치 파일을 죽일 필요가 있습니다
- 22. 각도를 사용하여 브라우저 새로 고침을 감지하는 방법
- 23. 편집 된 모든 상황을 저장하고 이맥스를 다시 시작할 때 모든 상황을 다시 시작하는 방법
- 24. ISOTOPE 필터링 - 모든 필터에서 항목을 숨길 필요가 있습니다.
- 25. Collpasible 메뉴는 초기 로딩시 모든 헤더를 닫을 필요가 있습니다.
- 26. 앱을 사용하여 iPhone의 모든 애플리케이션을 잠글 필요가 있습니다
- 27. 어떻게 레일에 select_tag에 대한 기본 값을 설정하고 페이지 새로 고침의 기본 값 다시로드를 보장하기 위해
- 28. 모든 브라우저
- 29. , 모든 브라우저
- 30. 부모가 오버플로하는 콘텐츠를 잘라내거나 숨길 필요가 있습니다. 한쪽에만 있습니다.
너무 넓습니다. 이것은 훌륭하게 들리지만 실제로 오버 헤드를 과도하게 증가시킵니다. 사용자에게 갑자기 변화하는 것도 좋은 생각이 아닙니다. 개발 또는 제작에 사용하고 있습니까? 코드 또는 매개 변수/텍스트를 변경하고 있습니까? –
현재 개발 용으로 만 사용합니다. 때로는 코드를 변경하는 경우도 있습니다. –