웹 사이트에 액세스 할 때마다 Chrome에서 새 JavaScript 파일을 확인하도록합니다.


25

따라서 Internet Explorer에서 인터넷 옵션으로 이동하면 여기에 이미지 설명을 입력하십시오

IE가 업데이트를 확인할 때의 설정을 조정할 수 있습니다. 여기에 이미지 설명을 입력하십시오

Chrome에서 비슷한 것을 할 수 있습니까? 현재 JavaScript 파일을 변경하고 Visual Studio에서 디버그하면 Chrome은 수정 된 버전을 사용하지 않고 항상 캐시 된 버전을 사용합니다. 현재 버전을 사용하려면 임시 인터넷 파일 / 캐시를 수동으로 지워야합니다.


14
대신 Visual Studio에서 수행하는 캐싱을 비활성화하지 않는 이유는 무엇입니까? (정말로, 누가 캐싱을 사용하여 IDE를 설계합니까?)
jpmc26

2
무슨 캐싱?
EJoshuaS-복원 모니카

21
나는 나의 마지막 논평을 느슨하게 말 하였다. 그것이 불명확하다면 나의 사과. 서버는 서버가 특정 헤더를 다시 보내는 경우에만 파일을 캐시합니다. Visual Studio의 개발 서버는 기본적으로 캐시 헤더를 다시 보내는 것이 어리 석습니다 . 이러한 파일에 대한 변경이 예상 되기 때문 입니다. 페이지를로드하는 데 1 초가 더 걸리면 브라우저에 캐시 된 오래된 JS 및 CSS 파일의 문제를 처리하지 않아도됩니다. 비활성화 할 수있는 방법이 있기를 진심으로 바랍니다.
jpmc26

1
Visual Studio 옵션을 찾을 수 없지만 개발 web.config 변경으로 인해 Visual Studio의 캐싱이 해결 될 수 있습니다. iis.net/configreference/system.webserver/staticcontent/…
GER

1
Chrome 확장 프로그램 "Cache Killer"가 문제를 해결했습니다. 이유는 모르겠지만 ctrl + f5가 작동하지 않는 경우가 있습니다
flagg19

답변:


55

옵션 1 : 캐시를 일시적으로 비활성화

  1. 개발자 도구 열기 (프레스 F12또는 메뉴, 추가 도구, 개발자 도구)
  2. 개발자 도구 설정 열기 (Press F1또는 DevTools 메뉴, 설정)
  3. 기본 설정 창의 네트워크 헤더에서 "캐시 비활성화 (DevTools가 열려있는 동안)"를 확인하십시오.

옵션 2 : 세션에 대한 캐시 비활성화

--disk-cache-size=1 --media-cache-size=1캐시를 1 바이트로 제한하여 캐시를 효과적으로 비활성화하는 명령 줄 스위치로 Chrome을 시작하십시오 .

옵션 3 : 수동 강제 새로 고침

캐시 된 컨텐츠를 무시하고 현재 페이지를 다시로드하십시오. Shift+ F5또는 Ctrl+ Shift+r

Chrome 키보드 단축키-Chrome 도움말 ( '웹 페이지 단축키'아래)

옵션 4 : 추가 재로드 옵션 ( 소스 )

개발자 도구가 열린 상태에서 다시로드 버튼을 마우스 오른쪽 버튼으로 클릭하면 다음과 같은 다시로드 메뉴가 표시됩니다.

  • 일반 재 장전 (Ctrl + R)
  • 강제 새로 고침 (Ctrl + Shift + R)
  • 캐시 비우기 및 하드 재로드

1
@Bruno Odd, 나는 항상 ctrl + f5를 사용했습니다. 방금 테스트했으며 둘 다 작동하는 것 같습니다.
Jeroen

옵션 2를 사용하는 것이 좋습니다. 스위치를 사용하여 Chrome에 별도의 바로 가기를 만들고 이름을 다르게 지정하십시오. Windows 작업 표시 줄의 다른 끝에 넣으십시오.
Christopher Hostage

8

크롬 리프레시와 100 % 관련이 없지만 추가 개발이 필요할 수 있습니다. @Dom이 말했듯이 리소스 뒤에? v = #를 추가 할 수 있습니다. 프로세스를 자동화하는 한 가지 방법은 해당 파일의 컨텐츠를 해시하고이를 버전으로 사용하는 것입니다.

이것이 도움이된다면 C # (구현을위한 면도기) 에서이 작업을 수행하는 방법에 대한 스 니펫 코드가 있습니다.

돕는 사람:

public static string HashUrl(string relativeUrl)
    {
        var server = HttpContext.Current.Server;
        if (File.Exists(server.MapPath(relativeUrl)))
        {
            byte[] hashData;
            using (var md5 = MD5.Create())
            using (var stream = File.OpenRead(server.MapPath(relativeUrl)))
                hashData = md5.ComputeHash(stream);

            return relativeUrl.Replace("~", "") + "?v=" + BitConverter.ToString(hashData).Replace("-", "");
        }
        return relativeUrl + "?v=notFound";
    }

이행:

<link rel="stylesheet" href=@Util.HashUrl("~/Controllers/Home/Views/Index.css") />

이것이 도움이되기를 바랍니다.

편집 --- 일부는 빌드 런타임과 1000 개의 작은 리소스를 요청했으며 약 11ms가 걸립니다.

https://ko.code-bude.net/2013/08/07/md5-hashes-in-c-benchmark-and-speed-%E2%80%8B%E2%80%8Boptimization/

여기에 이미지 설명을 입력하십시오 https://en.code-bude.net/wp-content/uploads/2013/08/md5_performance_benchmark_2.png


2
이와 같은 버전 관리 리소스 (또는 리소스 이름 자체에 버전 / 해시를 포함)는 특히 실제 환경에서 업데이트를 배포 할 때 매우 유용 할 수 있습니다. 캐싱이 발생할 수 있으며 많은 사용자가 캐시를 새로 고치는 방법 (또는 필요)을 알지 못합니다. (앱을 만들 때) 새로 이름이 지정된 리소스를 요청하면 캐시 할 수 없습니다.
TripeHound

1
이것이 큰 성능 손실이 아닙니까? 링크가 페이지에 삽입 될 때마다 모든 CSS 및 js 파일을 해싱하는 중 ...이 벤치 마크를 실행 했습니까?
Raidri에 따르면 Reinstate Monica는

2
@Raidri Hashing은 즉시 좋은 생각이 아닙니다 (처음 댓글을 달았을 때이 작업이 수행되는 것을 보지 못했습니다). 빌드 프로세스 중에 해시 또는 버전을 사용하도록 참조를 업데이트하는 것입니다.
TripeHound

@ Raidri 나는 해시하는 meaby 20 리소스가있는 작은 응용 프로그램을 가지고 있으며 빌드 시간의 차이를 보지 못했기 때문에 실제로 벤치마킹하려고 시도하지 않았습니다. 또한 두 번째 문장을 이해하지는 못하지만 리소스는 캐시되며 리소스 자체를 변경하면 해시 변경 => 경우 브라우저가 다시 캐시합니다.
Fred beauchamp

해시는 빌드 시간이 아니라 모든 페이지 생성에서 계산됩니다. 그것은 서버 문제이며 브라우저의 캐싱과 관련이 없습니다.
Raidri는 Reinstate Monica가

5

액세스 할 수없는 최종 사용자의 컴퓨터에서 강제로 새로 고침을 수행하려는 등의 경우가 아닌 다른 경우에는 브라우저를 식별하도록 쿼리 매개 변수로 스크립트 이름에 버전 번호를 추가 할 수 있습니다 다른 파일로 . 즉. example.js?v=1. 다시로드 할 때마다 번호를 변경해야합니다.

로컬 개발에서도이 작업을 수행 할 수 있지만 개발 도구 방법이 훨씬 효율적입니다.


3

당신이 얻을 때 @Steven 응답의뿐만 아니라, 콘솔 개발자 도구 열을 수행 할 수 있습니다 마우스 오른쪽 단추로 클릭새로 고침 버튼 과 드롭 다운 메뉴를 사용합니다.

이 메뉴에는 "Empty Cache and Hard reload" 옵션이 있습니다 .

당신이 찾고있는 것입니다.


1
영어 이외의 버전의 Chrome을 사용한다고 가정합니다. 영어 버전을 사용하며 "빈 캐시 및 하드 다시로드"라고합니다.
Nzall

1

사이트를 개발하는 경우 서버에서 파일을 변경할 때 파일을 올바르게 다시 가져 오려면 Chrome에 must-revalidate설정이 필요하다는 것을 알아야 Cache-Control합니다.

다른 답변은 SHIFT-F5를 눌러 자신의 Chrome 버전에서 모든 파일을 다시 가져 오는 방법을 알려줍니다. 그러나 사이트가 변경 될 때마다 모든 사이트 사용자에게이를 수행하도록 지시하는 것이 합리적입니까? Cache-Control포함하도록 설정 하면 must-revalidateChrome에서 파일이 변경되었는지 확인한 다음 필요할 때 올바르게 다운로드합니다.

이 블로그 게시물에서 세부 사항을 참조하십시오 : https://agiletribe.wordpress.com/2018/01/29/caching-for-chrome/

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.