Webpack 번들 분석기 사용 및 Craco 구성

webpack-bundle-analyzer를 사용하면 webpack을 빌드로 실행한 후 번들 출력의 크기를 확인할 수 있습니다.

어떤 라이브러리와 구성 요소가 얼마나 많은 공간을 차지하는지 시각화하여 앱 크기를 최적화하는 데 도움이 될 수 있습니다.

사이트의 용량이 클수록 로딩 속도가 빨라지므로 가장 작은 용량으로 묶는 것이 성능에 좋습니다.

npm i webpack-bundle-analyzer -D

다음과 같이 webpack.config.js를 구성하여 Webpack 번들 분석기 기능을 Webpack에 추가할 수 있습니다.

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"
  },
  ...
}

웹팩 구성을 완료한 후 빌드하면 번들된 결과를 브라우저를 통해 확인하고 분석할 수 있습니다.

next.js에서는 대신 @next/bundle-analyzer를 사용할 수 있습니다.
React Native에는 비슷한 라이브러리로 React-Native-Bundle-Visualizer가 있습니다.
단, 앱 설치 후 실제 용량이 아닌 메트로와 함께 제공되는 js 파일을 확인하실 수 있습니다.

https://www.npmjs.com/package/webpack-bundle-analyzer

웹팩 번들 분석기

번들 콘텐츠를 편리한 대화식 확대/축소 가능한 트리맵으로 제공하는 Webpack 플러그인 및 CLI 유틸리티입니다. 최신 버전: 4.8.0, 마지막 게시: 18일 전. “npm i webpack-bundle-analyzer”를 실행하여 프로젝트에서 webpack-bundle-analyzer를 사용하십시오. 일

www.npmjs.com

https://www.npmjs.com/package/@next/bundle-analyzer

@다음/번들 분석기

Next.js 프로젝트에서 webpack-bundle-analyzer를 사용하세요. 최신 버전: 13.2.3, 마지막 게시: 2일 전. `npm i @next/bundle-analyzer`를 실행하여 프로젝트에서 @next/bundle-analyzer를 사용하십시오. npm 레지스트리에는 @n을 사용하는 152개의 다른 프로젝트가 있습니다.

www.npmjs.com

https://www.npmjs.com/package/react-native-bundle-visualizer

React 네이티브 번들 시각화 도우미

React Native 번들에 무엇이 있는지 확인하세요. 최신 버전: 3.1.3, 마지막 게시: 18일 전. “npm i React-Native-Bundle-Visualizer”를 실행하여 프로젝트에서 React-Native-Bundle-Visualizer 사용을 시작하십시오. npm 레지스트리 us에 다른 프로젝트가 없습니다.

www.npmjs.com

https://craco.js.org/docs/configuration/getting-started/

시작하기 | 크라코

구성 파일 설정

craco.js.org