# CSS 파일 크기 최적화

## CSS 최적화 플러그인 <a href="#css-file-minimizer-plugin" id="css-file-minimizer-plugin"></a>

CssMinimizerWebpackPlugin 플러그인은 [cssnano](https://cssnano.co/)를 사용해 CSS를 최적화(압축) 합니다. [css-minimizer-webpack-plugin](https://www.npmjs.com/package/css-minimizer-webpack-plugin) 패키지를 프로젝트에 설치한 후, Webpack 구성 파일을 열어 플러그인을 설정합니다.

{% tabs %}
{% tab title="패키지 설치" %}

```bash
npm i css-minimizer-webpack-plugin -D
```

{% endtab %}

{% tab title="webpack.config.js" %}

```javascript
// Node.js - os 모듈 불러오기
const os = require('os')

// CssMinimizerPlugin 모듈 불러오기
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/!,
        exclude: /node_modules/,
        use: [
          isDevMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ],
      }
    ]
  },
  
  // 최적화 설정
  optimization: {
    // 압축
    minimize: isDevMode ? false : true,
    // 미니마이저
    minimizer: [
      // 플러그인 인스턴스 생성
      new CssMinimizerPlugin({
        // CPU 멀티 프로세서 병렬화 옵션 (기본 값: true)
        parallel: os.cpus().length - 1,
      }),
    ],
  },
}
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
Node.js의 [os.cpus](https://nodejs.org/api/os.html#os_os_cpus) 모듈은 CPU 코어 정보를 포함하는 배열 객체를 반환합니다. "멀티 프로세서 병렬화"는 빌드 속도를 크게 높일 수 있으므로 적극적으로 사용이 권장됩니다.
{% endhint %}

[빌드 명령](https://yamoo9.gitbook.io/webpack/webpack/manage-env-variables#build)을 실행하여 출력한 결과를 살펴보면, CSS 파일의 코드가 최적화(압축) 되었음을 확인할 수 있습니다.

![](https://1127883942-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTbexhuB2p5ev8QaGgg%2F-MTjYa0SGuYDAtFOv597%2F-MTjYsCFe3JLRpNkY5-h%2Fimage.png?alt=media\&token=975eb070-4af2-4688-8966-09f9ced942d5)

## 참고 <a href="#reference" id="reference"></a>

{% embed url="<https://webpack.js.org/plugins/css-minimizer-webpack-plugin>" %}