[성능 최적화] 불필요한 css제거 최적화

📝 불필요한 css 제거 [블로그]

📌 실행

크롬 > 개발자도구 > shift + command + p > coverage 또는 범위 계측 > 실행

📌 실행 결과

css 사용량 시각화가 매우 많이 차지하는것을 확인할수 있음

📌 최적화 진행

craco 설치(https://github.com/dilanx/craco)
npm i -D @craco/craco

PurgeCSS설치
npm i --save-dev @fullhuman/postcss-purgecss

craco.config.js 파일 생성(폴더구조)

  my-app
  ├── node_modules
+ ├── craco.config.js
  └── package.json

craco.config.js 파일에 기입

const purgecss = require('@fullhuman/postcss-purgecss')

module.exports = {
  style: {
    postcss: {
      plugins: [
        purgecss({
          content: ['./src/**/*.html', './src/**/*.tsx', './src/**/*.ts']
        })
      ]
    }
  }
}

7.pakage.json 작성

 "scripts": {
    "start": "craco start",
    "build": "craco build",
  }

📌 최적화 완료 결과

🤓 느낀점

최적화의 방법은 여러가지가 있고 무궁무진하다고 생각이 들었다. css를 최적화 하는것은 처음이었지만
생각보다 간단했고 이렇게 간단한것들로 성능이 최적화 되는 부분들이 많이 있을거라 생각이 들기 때문에
최적화를 더 신경써야겠다