🎈

[React]webpack bundle analyzer 사용해보기 (create-react-app)

간단소개

효율적인 빌드를 위한 webpack bundle 분석하기

팔만코딩경 컨트리뷰터

ContributorNotionAccount

주제 / 분류

React

Scrap

태그

9 more properties

webpack-bundle-analyzer

webpack-bundle-analyzer

Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap. Latest version: 4.5.0, last published: 4 months ago. Start using webpack-bundle-analyzer in your project by running `npm i webpack-bundle-analyzer`. There are 2619 other projects in the npm registry using webpack-bundle-analyzer.

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

webpack-bundle-analyzer

webpack-contrib

설치

# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer
Shell
복사

시작하기

create-react-app의 경우 webpack-bundle-analyzer를 plub-in으로 사용하려면 eject을 사용해야한다. eject를 사용하는 경우 아래의 문제가 발생할 수 있다.

•

cra의 모든 설정들을 직접 유지보수 해야한다 (webpack과 babel 까지..)

•

one build dependency의 장점을 잃게 된다

더 자세한 설명은 아래 블로그에 나와있다

Create-React-App에서 Eject사용안하기(customize-cra, react-app-rewired)

페이스북에서 개발한 Create-React-App(CRA) 보일러 플레이트를 사용하게 되면 간편하게 리액트 프로젝트를 시작할 수 있다. CRA는 리액트 프로젝트를 처음 실행할 때 필요한 여러가지 라이브러리나 웹팩의 설정 없이 간편하게 프로젝트를 시작할 수 있다. CRA가 가지는 장점 중 몇가를 나열해보겠다. 숨겨져 있던 모든 설정들(All...

https://medium.com/@jsh901220/create-react-app%EC%97%90%EC%84%9C-eject%EC%82%AC%EC%9A%A9%EC%95%88%ED%95%98%EA%B8%B0-customize-cra-react-app-rewired-10a83522ace0

분석 시작 without eject

다행이도 create-react-app을 사용하는 개발자들을 위해 eject 없이 webpack-bundle-analyzer를 사용할 수 있는 라이브러리가 있다.

이 라이브러리를 사용하면 webpack-bundle-analyzer의 결과를 static page로 만들어준다.

cra-bundle-analyzer

svengau

아래 명령어를 사용해서 간단하게 설치해주자

# NPM
npm install --save-dev cra-bundle-analyzer
# Yarn
yarn add -D cra-bundle-analyzer
Shell
복사

사용하기

npx cra-bundle-analyzer
Plain Text
복사

명령어를 실행하면 webpack-bundle-analyzer의 결과 파일이 build/report.html 로 생성된다

옵션

실행하기

이제 build/report.html 파일을 열어서 결과를 확인해보자!

결과보기

아래 사진처럼 결과를 볼 수 있고, 각 모듈별 사이즈를 확인할 수 있다.

Reference

CRA에서 eject 없이 webpack-bundle-analyzer 사용하기

CRA 공식 문서에서 번들 분석 도구로 source-map-explorer를 소개 해주지만, 컬러풀하고 많이 사용하는 webpack-bundle-analyzer 를 사용해보고 싶었다! 하지만 eject를 해야하는 부담 때문에 구글링 해서 이 방법 으로 시도해봤으나 안됀다..😢 그러다 CRA에서 eject 없이 사용할수 있게 해주는 cra-bundle-analyzer 라는 패키지를 발견해서 적용해보니 아주 잘된다!

https://velog.io/@jesop/CRA%EC%97%90%EC%84%9C-eject-%EC%97%86%EC%9D%B4-webpack-bundle-analyzer-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

Create-React-App에서 Eject사용안하기(customize-cra, react-app-rewired)

https://medium.com/@jsh901220/create-react-app%EC%97%90%EC%84%9C-eject%EC%82%AC%EC%9A%A9%EC%95%88%ED%95%98%EA%B8%B0-customize-cra-react-app-rewired-10a83522ace0