웹팩(Webpack) 번들링 시 캐시 무효화 설정하기 (Cache Busting)

 

이전 포스팅에서 웹팩 CSS Loader를 설치하고 CSS를 웹팩으로 적용을 해보았습니다

못 보신 포스팅이 있다면 아래의 리스트에서 확인해보시길 바랍니다

 

 

 

1. 웹팩 초기 설정 방법
   • 2022.07.23 - 자바스크립트 파일을 하나로 Webpack이 왜 중요하고 왜 웹팩을 알아야 할까
2. CSS & SASS 적용하기
   • 2022.07.24 - 웹팩(Webpack)의 CSS Loader 설치 및 CSS, SASS 웹팩 설정하기
3. Cache Busting an Plugins ( 캐시 무효화 )
   • 현재 포스팅입니다
4. html-webpack-plugin 설치
   • 캐시가 적용된 스크립트 파일을 자동으로 index.html 연결할 때 사용됩니다.
5. template 파일 생성
6. Splitting Dev & Production 
7. webpack-dev-server
8. 이미지 파일 적용하기 ( html-loader, file-loader ) 
9. clean-webpack
10. Extract CSS & Minify HTML / CSS / JS
11. 바벨 설치하기
12. 리액트 적용해보기
13. Multiple Entrypoints & Vendor.js
14. 여러 페이지별 파일을 번들링 하기

 

 

캐시 무효화란?

CSS 코드를 웹사이트에 캐시 메모리에 저장하여 사용자가 접속했을 때

이전에 저장해둔 메모리를 바탕으로 코드를 불러오며 로딩 시간을 단축합니다

그렇다 보니 간혹 CSS를 수정하면 바로 적용이 안 되는 경우가 발생합니다

그 이유가 바로 그 때문입니다

 

이러한 경우가 발생할 때 

파일명 뒤에 알파벳과 숫자 조합하여 파일을 생성하여

새로운 파일명을 업로드하여

웹사이트에서 새로운 파일이 생성되었다는

인식을 주어 기존의 캐시를 삭제하고

새로운 파일을 저장하는 방법을

그것을 캐시 무효화라고 합니다

 

 

캐시 무효화하기 위해 만든 파일명

 

 

 

캐시 무효화 코드 수정은 간단합니다

아래와 같이 filename부분을 [contenthash]를 추가만 하면 됩니다

 

 

 

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "main.[contenthash].js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

 

 

그럼 번들이 된 파일에는 알파벳과 숫자 조합이 되어

새로운 파일로 계속 갱신해서 생성합니다

단, CSS파일에 코드가 수정되었을 때만

파일명이 새롭게 갱신이 됩니다

 

이렇게 오늘은 웹사이트에서 캐시 메모리에 어떠한 정보를 저장하는지

그 캐시가 어떻게 작동하는지도 알아보고

캐시 무효화가 어떤 이로움을 주는지 확인해 보았습니다

 

앞으로 10가지 항목이 더 남았으니

조금만 더 힘을 내세요!

 

대모험은 이제부터 시작입니다

파이팅