CSS 파일 크기 최적화

CSS 최적화 플러그인

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

패키지 설치

npm i css-minimizer-webpack-plugin -D

webpack.config.js

// 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,
      }),
    ],
  },
}

Node.js의 os.cpus 모듈은 CPU 코어 정보를 포함하는 배열 객체를 반환합니다. "멀티 프로세서 병렬화"는 빌드 속도를 크게 높일 수 있으므로 적극적으로 사용이 권장됩니다.

빌드 명령을 실행하여 출력한 결과를 살펴보면, CSS 파일의 코드가 최적화(압축) 되었음을 확인할 수 있습니다.

참고

CssMinimizerWebpackPlugin | webpackwebpack