Webpack - Caching / 개발 서버 연결해보기

♣ Caching

- webpack은 컴파일로 생성된 파일에서 변경된 내용이 없다면 브라우저는 캐시 상태를 유지하고 그대로 사용하게 된다

코드를 직접 작성한 사람은 이 파일이 변경된 건지 안된 건지 알 수 있지만 다른 사람들이 본다면? 업데이트가 된 거야..? 뭐야라고 생각할 수도 있다!

이럴 때 알 수 있는 방법은 build시 생성 되는 파일이름으로 확인 할 수 있는데 방법은 아래아와 같다. 

 

1. 파일명에  hash값 작성하기!

// 변경 전
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },

// 변경 후
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name][contenthash].js',
  },

 

entry(진입점)이 한개라면 [name]이 main으로 자동 적용되는 것으로 확인이 된다! 아마 webpack의 기본설정인 거 같은데

만약 entry가 여러 개라면 [name] 부분이 entry의 설정의 key 값이 name으로 들어가는 걸 확인할 수 있었고 그뒤에 contnetnhash 부분이 무작위 글자값이 들어가면서 값이 변경됬는지 확인 할 수 있고 dist/index.html에도 적용이 되는 것을 확인할 수 있다! 

 

정리하면,

변경사항이 존재한다 - hash 부분에 다른 값이 생성되면서 신규파일 생성

변경사항이 존재하지 않는다 - 기존 파일 유지 (Caching)

[] 내부에 testhash 등 다른 값을 사용해도 되는가 - 불가 해쉬값이 아니고 [] 전체 스트링으로 값이 나온다.

이는 webpack에서 제공해 주는 substitutions이라는 대괄호 문자열을 사용하여 파일 이름을 템플릿 화하는 방법에 맞지 않는 명칭을 사용했기 때문이다.

🔗파일명 템플릿화 방법 관련 공식문서

 

그런데 여기서 저 파일들을 보면서 생기는 생각 저렇게 파일이 계속 쌓이면 너무 많아지는데..라는 생각이 들 수 있는데 이런 불편한 사항이 만들어지지 않게 웹팩은 이전파일을 삭제하는 옵션값을 제공한다.  🔗output.clean  

// 최종코드
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name][contenthash].js',
    clean: true,
  },

 

♣ development server 

- webpack의 devserver는 간단한 웹 서버와 실시간 다시 로딩 기능을 제공한다.

지금까지는 vscode에서 제공해 주는 익스텐션(Live Server)을 사용했지만 간단한 설정을 통해 webpack을 통해 개발서버를 오픈해 보겠다.  

1. webpack-dev-server 설치

npm i -D webpack-dev-server

 

2. webpack.confign.js 설정

devServer: {
// 정적 파일 제공 설정
  static: {
    directory: path.join(__dirname, 'dist'), // dist 폴더를 정적 파일 경로로 설정
  },
  compress: true,    // gzip 압축 활성화
  port: 3000,        // 개발 서버 포트 번호
  open: true,        // 서버 시작 시 브라우저 자동 실행
  },

 

3. package.json script 설정

라이브러리를 실행하고 devserver설정을 했다면 오픈을 할 수 있는 명령어가 필요하겠죠?!

  "scripts": {
    "dev": "webpack serve"
  },
  
  
  // 개발 서버 실행과 동시에 페이지 오픈하려면? (config에 open이랑 같은 역활!)
    "scripts": {
    "dev": "webpack serve --open"
  },
  
  
  // 특정 브라우저 설정도 가능
  "scripts": {
    "dev": "webpack serve --open chrome",  // Chrome으로 열기
    "dev:firefox": "webpack serve --open firefox"  // Firefox로 열기
  }

 

이렇게 설정해 주면 liveserver가 아닌 webpack 개발 서버로 오픈된 걸 확인할 수 있다!!

 

 

 - gzip 압축이란?

- webpack.config.js에서 devserver 옵션값을 지정할 때 나는 compress: true를 진행했다. 왜 사용하는 걸까?

대역폭을 절약하고 사이트 속도를 높이는 가장 간단하고 효과적인 방법으로 자바스크립트 속도를 높이기 위해 gzip 압축을 사용한다고 말한다.

 

Gzip의 압축방식은 1. 서버가 HTML, CSS, Javascript 등의 파일을 압축하여 클라이언트로 전송2. 클라이언트는 압축된 파일을 해제(Decomporess) 한 후에 렌더링이와 같은 방식인데 압축을 하게 되면 최대 70 ~ 90% 가까이 파일의 크기를 줄일 수 있기 때문에 네트워크 트래픽 감소, 로딩 속도 향상, 서버 부하 감소 효과가 발생하게 된다. 

 

하지만 압축이나 압축을 해제 시 CPU 리소스가 사용되기 때문에 작은 프로젝트라면 굳이 안 하는 것도 상관없을 거 같고

개발모드라면 굳이 활성화를 시킬 필요가 있을까?라는 생각이 들긴 하였다.