webpack-bundle-analyzer

webpack-bundle-analyzer 사용하기 & craco 설정

webpack-bundle-analyzer를 사용하면 빌드로 웹팩이 실행된 뒤 번들링된 결과물의 사이즈를 확인할 수 있다. 어떤 라이브러리, 컴포넌트가 얼마만큼의 용량을 차지하는지 시각화하여 보여주기에 앱 사이즈를 최적화하는데 도움이 될 수 있다. 웹 사이트의 용량이 클수록 로딩 속도가 커지므로, 최대한 작은 용량으로 번들링하는 것이 성능에 좋다. npm i webpack-bundle-analyzer -D webpack.config.js을 다음과 같이 설정함으로써, 웹팩 번들 분석 기능을 웹팩에 추가할 수 있다. const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { plu..