front-end developer

Webpack을 사용하여 번들링되는 모듈을 분석해서 시각적으로 표현해주는 모듈이다. 모듈이 차지하는 용량에 따라 눈에 보이는 영역도 커지기 때문에 어떤 모듈이 얼만큼의 용량을 차지하는지 쉽게 파악알 수 있다. 설치 npm install --save-dev webpack-bundle-analyzer 사용 방법 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { plugins: [ new BundleAnalyzerPlugin() ] } 레포트 화면 Webpack 빌드를 실행하면 아래와 같은 화면이 새창으로 뜬다. 부가 기능 레포트 화면을 static 파일로 생성하기 new ..