빌드 최적화 구성

1. CssMinimizerWebpackPlugin 설치

css-minimizer-webpack-plugin 패키지를 프로젝트에 설치합니다.

패키지 설치

npm i css-minimizer-webpack-plugin -D

2. 플러그인 구성

optimization 최적화 구성 항목을 추가한 후, CssMinimizerWebpackPlugin 플러그인, splitChunks 옵션을 다음과 같이 설정합니다.

webpack.config.js

const os = require('os')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
// ...
  
module.exports = (_env, argv) => {
  // ...
  return {
    optimization: {
      minimize: true,
      minimizer: [
        new CssMinimizerPlugin({
          parallel: os.cpus().length - 1
        }),
      ],
    },
    splitChunks: {
      chunks: 'all',
      minSize: 0,
      minRemainingSize: 0,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 20,
      enforceSizeThreshold: 50000,
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -10,
          reuseExistingChunk: true,
        },
      },
    },
  }
}