기타

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

citron031 2023. 3. 14. 23:18

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