CRA로 생성한 프로젝트에서 webpack bundle analyzer 사용하기

 

이렇게 생긴 화면이 여러분들이 많이 알고 계신 webpack bundle analyzer 입니다

 

웹팩을 통해 번들링한 결과를 시각적으로 보여줘서

 

어떤파일이 용량이 큰지

 

중복되는 패키지는 없는지 체크하여 번들결과물을 최적화하는데 도움을 줍니다

 

 

그런데 CRA(create react app)로 만든앱은 webpack 관련 파일이 내부적으로 react-script로 래핑되어있기 때문에

 

webpack.config.js 파일같은것을 사용할수 없습니다

 

 

이러한 상황에서 webpack-bundle-analyzer를 사용할수 있는 방법을 안내해드려요

 

 

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

webpack-bundle-analyzer

npm i webpack-bundle-analyzer

 

 

먼저 패키지를 설치합니다

 

그리고 아래의 스크립트 파일을 프로젝트 내부에 생성합니다

 

// analyze.js
process.env.NODE_ENV = 'production';

const webpack = require('webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const webpackConfigProd = require('react-scripts/config/webpack.config')('production');

webpackConfigProd.plugins.push(new BundleAnalyzerPlugin());
webpackConfigProd.resolve.alias['react-dom'] = '@hot-loader/react-dom';

webpack(webpackConfigProd, (err, stats) => {
  if (err || stats.hasErrors()) {
    console.log(err);
  }
});

 

 

그리고 이 파일을 실행시키면 됩니다

 

node analyze.js