HTTP 캐시, webpack 캐싱

캐시란?

 컴퓨터 과학에서 데이터나 값을 미리 복사해 놓는 임시장소를 이야기 한다.

 - 장점 :
   자주 사용되는 데이터나 반복되는 연산에 대하여 원래 데이터를 접근하는 것보다 빠르게 꺼내서 사용할 수 있다.

 - 단점 :
   임시로 저장하는 과정에서 리소스가 사용되기 때문에 불필요한 캐시가 많다면 역으로 캐시 메모리가 늘어남에 따른
   저장 공간의 낭비가 될 수 있다.

HTTP 캐시 사용하기

 서버에 요청되어 얻어진 값을 캐싱할 수 있는데, 웹 브라우저가 요청하는 리소스가 캐시에 있다면 서버에 요청을 보내지 않고 캐싱되어 있는 리소스를 읽어와 사용하게 됩니다. 이는 서버에서 Cache-Control에 max-age를 설정하여 관리할 수 있습니다.

webpack 캐시 사용하기

webpack에서 번들링하는 과정에서 브라우저는 캐싱이라는 기술을 통해 불필요한 네트워크 트래픽을 줄이면서 사이트를 더 빠르게 로드할 수 있게끔 동작한다. 
- [chunkhash]를 사용하여 변경되었는지 확인하도록 설정한다.
output : {
  filename : '[name].[chunkhash].js',
  path : path.resolve(__dirname,'dist')
}

 

웹 서비스 캐시 똑똑하게 다루기

 

 

Caching | webpack