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 = {
plugins: [
new BundleAnalyzerPlugin()
]
}
만약, CRA 프로젝트라면 craco를 이용할 수도 있다.
// craco.config.js
const BundleAnalyzerPlugin =
require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
webpack: {
plugins: [new BundleAnalyzerPlugin()],
},
}
craco 설정 파일을 만든 뒤, package.json을 수정한다.
{
...
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test"
},
...
}
🍀 웹팩 설정이 끝난 뒤 build를 하면, 브라우저를 통해서 번들링된 결과를 확인, 분석할 수 있다.
🧀 next.js에서는 대신 @next/bundle-analyzer를 사용할 수 있다.
🌽 react native는 비슷한 라이브러리로 react-native-bundle-visualizer가 있다.
다만, 확인할 수 있는 건 metro로 번들링된 js 파일들이고 실제 앱 설치 후 용량은 아니다.
https://www.npmjs.com/package/webpack-bundle-analyzer
webpack-bundle-analyzer
Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap. Latest version: 4.8.0, last published: 18 days ago. Start using webpack-bundle-analyzer in your project by running `npm i webpack-bundle-analyzer`. Th
www.npmjs.com
https://www.npmjs.com/package/@next/bundle-analyzer
@next/bundle-analyzer
Use `webpack-bundle-analyzer` in your Next.js project. Latest version: 13.2.3, last published: 2 days ago. Start using @next/bundle-analyzer in your project by running `npm i @next/bundle-analyzer`. There are 152 other projects in the npm registry using @n
www.npmjs.com
https://www.npmjs.com/package/react-native-bundle-visualizer
react-native-bundle-visualizer
See what's inside your react-native bundle. Latest version: 3.1.3, last published: 18 days ago. Start using react-native-bundle-visualizer in your project by running `npm i react-native-bundle-visualizer`. There are no other projects in the npm registry us
www.npmjs.com
https://craco.js.org/docs/configuration/getting-started/
Getting Started | CRACO
Setting up the configuration file
craco.js.org