CSS 파일 크기 최적화
CSS 최적화 플러그인
CssMinimizerWebpackPlugin 플러그인은 cssnano를 사용해 CSS를 최적화(압축) 합니다. css-minimizer-webpack-plugin 패키지를 프로젝트에 설치한 후, Webpack 구성 파일을 열어 플러그인을 설정합니다.
npm i css-minimizer-webpack-plugin -D// 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,
}),
],
},
}빌드 명령을 실행하여 출력한 결과를 살펴보면, CSS 파일의 코드가 최적화(압축) 되었음을 확인할 수 있습니다.
참고
Last updated
Was this helpful?