webpack Caching 설정

Caching은 자주 사용하는 데이터를 저장해 두고 client - server 통신의 비용을 줄일 수 있는 시스템이다.

Webpack을 이용하여 Caching설정을 할 수 있다.

 

module들을 bundle.js로 만들면, 브라우저는 bundle.js를 받고 web application을 동작시키게 되는데, 이때 설정한 내용으로 bundle.js를 만들게 되면 브라우저는 같은 이름으로 bundle.js을 호출한다.

브라우저가 caching을 구별하는 기준은 url이다. 그래서 load하는 resource의 이름이 같을 경우 caching을 이용하기 때문에 이전 bundle.js의 결과로 보이게 되어, 파일이 수정이 되었더라도 수정이 안된것 처럼 보여진다.

이런 문제를 방지하기 위해 bundle.js에 hash를 붙여줄 수 있다.

그리고 파일이 bundling될때만 hash값을 변경해준다.

bundling이 되기 전까지는 같은 이름으로 사용되기 때문에 cache를 이용하고, 코드를 수정 후 다시 bundling하게 될 경우 hash값이 바뀌므로 cache를 이용하지 않고 다시 새로운 bundle.js를 load하게 된다.

bundle.js에 hash 붙이기

webpack으로 설정할 수 있는 방식은 3가지가 있다.

• hash
• contents hash
• chunk hash

1. hash

간단하게 output의 filename에 '[hash]'를 입력하여 hash를 붙일 수 있다.

build가 될 때 마다 hash가 자동으로 변경된다.

변경된 내용이 없다면 기존 hash값이 사용되고, 변경된 내용이 있다면 새로운 hash값을 붙인 bundle파일을 생성한다.

module.exports = {
  ...,
  output: {
       filename: 'bundle.[hash].js',
       path: path.resolve(__dirname, 'dist')
  },
  ...,
}

index.html에 자동으로 hash값이 갱신된다.

그냥 이대로 사용한다면 hash값이 변경될 때마다 bundle파일이 쌓이게 된다.

이를 방지하기 위해 clean-webpack-plugin을 사용할 수 있다.

npm i clean-webpack-plugin -D

webpack.config.js에 plugin 추가

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    ...,
    plugins: [
        ...,
        new CleanWebpackPlugin()
    ],
    ...
}

이제 build할 때 hash가 변경된다면 기존 bundle파일은 지워진다.

 

2. contents hash

그 전 css 관련 plugin을 설치해야 된다.

css 파일을 별도 파일로 추출(extract) 하고, css 코드가 포함된 JS 파일 별로 css 파일을 생성하도록 설정한다.

npm i mini-css-extract-plugin -D

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    ...,
    module: {
        rules: [
            {
                ...,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    ...
                ]
            },

        ]
    },
    plugins: [
        ...,
        new MiniCssExtractPlugin()
    ],
    ...
}

이제 프로젝트를 build할 경우 css파일이 caching되어 사용할 수 있게 되고, html문서의 크기가 줄어든다.

여기서 main.css가 고정될 경우 위의 문제가 다시 발생하기 때문에 css파일도 hashing을 해주어야 된다.

css파일에 hash를 적용하려면 webpack.config.js에서 plugin배열의 MiniCssExtractPlugin()를 수정한다.

new MiniCssExtractPlugin({
   filename: '[hash].css'
})

build할 경우 css에 hash가 적용되어 나온다.

여기서 js와 css의 동기화 때문에 js만 변경되고 css가 변경되지 않더라도 css파일의 hash값이 갱신된다.

이 문제를 방지하기 위해 contents에 따라 hash를 부여하는 contents hash를 사용할 수 있다.

[hash]를 [contenthash]로 바꿔준다.

new MiniCssExtractPlugin({
   filename: '[contenthash].css'
})

 

3. chunk

bundling을 하다보면 생성되는 bundle.js의 사이즈가 커진다.

이럴 경우 파일의 요청 수가 줄어드는 이점이 있지만, 파일 크기가 커져 전송속도가 지연되게 되는데, 몇가지 기준을 통해 bundle.js를 분리하게 된다. bundle.js가 분리되어 있는 형태를 chunk라고 한다.

chunk파일로 나누는 기준은 여러가지가 있다.

2가지만 소개해보자면

 

•  Runtime chunk파일

Application이 memory를 할당받고 실행되는 환경을 runtime이라고 한다.

bundle.js에는 module들을 순서대로 읽을 수 있도록 하는 runtime환경에서 module들을 안전하게 사용할 수 있도록 초기화하는 runtime 코드가 존재한다. 해당 코드는 module이 몇개 관련되던 상관이 없다. 이러한 runtime 코드들만 chunk로 분류하게 되면 bundle.js에는 module에 대한 내용만 남게 된다.

runtime chunk

이런 형태가 되면 상대적으로 변하는 코드만 따로 관리가 되고 변화가 없는 runtime코드는 cache를 사용하기 때문에 application이 가벼워지는 이점이 있다.

 - webpack설정

output의 filename에 bundle을 [name]으로 설정한다.

[name]은 entry파일이름 또는 webpack설정 파일 내의 name property에 할당한 값이 적용되는 공간이다.

그리고 hash를 chunkhash로 변경한다.

module.exports = {
    ...,
    output: {
         //filename: 'bundle.[hash].js',
         filename: '[name].[chunkhash].js',
         path: path.resolve(__dirname, 'dist')
    },
}

그리고 optimization옵션을 추가로 작성한다.

optimization은 bundle.js를 최적화 해준다.

module.exports = {
    ...,
    optimization:{
        runtimeChunk:{
            name: 'runtime'
        }
    },
    ...
}

그리고 build를 해보면 runtime파일이 따로 나온다.

 

• Vendor chunk파일

만약 Jquery를 사용한다고 했을 때 version을 변경하는 등의 작업이 없다면 코드가 변경되지는 않을것이다.

이러한 외부 모듈을 따로 저장하여 caching한다. 

vendor chunk

 

- webpack설정

먼저 외부 모듈인 jquery를 설치하고 jquery를 사용한 코드를 index.js에 작성한다.

npm i jquery -S

index.js

import 'normalize.css';
import styles from './index.css';
import $ from 'jquery';

function component() {
    const element = document.createElement('div');
    element.innerHTML = "Hello Webpack";
    element.classList = styles.helloWebpack;
    return element;
}

document.body.appendChild(component());
//jquery 사용
console.log($(`.${styles.helloWebpack}`.length))

webpack.config.js

module.exports = {
    ...,
    optimization:{
        ...,
        splitChunks: {
            cacheGroups:{
                commons:{
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all'
                }
            }
        }
    },
}

splitChunks를 사용한다.

cacheGroups를 정의한다.

test에 node_modules를 정규 표현식을 사용하여 설정한다.

공통으로 묶는 chunk파일은 node_modules에 해당되는 module들이라고 정의 한다.

build하면 vendor파일이 나온다.

vendors파일을 보면 JQuery관련된 내용이 들어있다.

이러한 caching기법을 이용하여 application을 효율적으로 셋팅할 수 있다.