<div id="readability-page-1" class="page"><article id="mainContent">
                <div>
                  <p><a href="/m/category/FRONTEND/REACTJS"><span>FRONTEND/REACTJS</span></a></p><h3>CRA로 생성한 프로젝트에서 webpack bundle analyzer 사용하기</h3>
                </div>
                <p><cite>나를찾는아이</cite>
                  <span> 2022. 7. 20. 18:12</span>
                </p>
                
            
                <div>
                                <figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2022-07-19 오후 5.05.08.png" data-origin-width="1466" data-origin-height="900">
    <span data-url="https://k.kakaocdn.net/dn/bM7cFF/btrHI3UTF4P/yJq2XybvrLQSsl1qs45F0K/img.png" data-lightbox="lightbox">
        <img src="https://k.kakaocdn.net/dn/bM7cFF/btrHI3UTF4P/yJq2XybvrLQSsl1qs45F0K/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="스크린샷 2022-07-19 오후 5.05.08.png" data-origin-width="1466" data-origin-height="900">
    </span>
    
</figure>

<p data-ke-size="size16">이렇게 생긴 화면이 여러분들이 많이 알고 계신 webpack bundle analyzer 입니다</p>

<p data-ke-size="size16">웹팩을 통해 번들링한 결과를 시각적으로 보여줘서</p>

<p data-ke-size="size16">어떤파일이 용량이 큰지</p>

<p data-ke-size="size16">중복되는 패키지는 없는지 체크하여 번들결과물을 최적화하는데 도움을 줍니다</p>


<p data-ke-size="size16">그런데 <a href="https://create-react-app.dev/" target="_blank" rel="noopener">CRA</a>(create react app)로 만든앱은 webpack 관련 파일이 내부적으로 react-script로 래핑되어있기 때문에</p>

<p data-ke-size="size16">webpack.config.js 파일같은것을 사용할수 없습니다</p>


<p data-ke-size="size16">이러한 상황에서 webpack-bundle-analyzer를 사용할수 있는 방법을 안내해드려요</p>


<p data-ke-size="size16"><a href="https://www.npmjs.com/package/webpack-bundle-analyzer" target="_blank" rel="noopener">https://www.npmjs.com/package/webpack-bundle-analyzer</a></p>
<figure id="og_1658217902982" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="webpack-bundle-analyzer" data-og-description="Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap. Latest version: 4.5.0, last published: 9 months ago. Start using webpack-bundle-analyzer in your project by running `npm i webpack-bundle-analyzer`. T" data-og-host="www.npmjs.com" data-og-source-url="https://www.npmjs.com/package/webpack-bundle-analyzer" data-og-url="https://www.npmjs.com/package/webpack-bundle-analyzer" data-og-image="https://scrap.kakaocdn.net/dn/NYwTx/hyO80h6FMV/PVLhmyYi7CkJBd9qrHxAuk/img.png?width=1200&amp;height=630&amp;face=0_0_1200_630"><a href="https://www.npmjs.com/package/webpack-bundle-analyzer" target="_blank" rel="noopener" data-source-url="https://www.npmjs.com/package/webpack-bundle-analyzer">

<div>
<p data-ke-size="size16">webpack-bundle-analyzer</p>
<p data-ke-size="size16">Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap. Latest version: 4.5.0, last published: 9 months ago. Start using webpack-bundle-analyzer in your project by running `npm i webpack-bundle-analyzer`. T</p>
<p data-ke-size="size16">www.npmjs.com</p>
</div>
</a><img src="https://scrap.kakaocdn.net/dn/NYwTx/hyO80h6FMV/PVLhmyYi7CkJBd9qrHxAuk/img.png?width=1200&amp;height=630&amp;face=0_0_1200_630"></figure>
<pre id="code_1658217888162" data-ke-language="javascript" data-ke-type="codeblock"><code>npm i webpack-bundle-analyzer</code></pre>


<p data-ke-size="size16">먼저 패키지를 설치합니다</p>

<p data-ke-size="size16">그리고 아래의 스크립트 파일을 프로젝트 내부에 생성합니다</p>

<pre id="code_1658217942283" data-ke-language="javascript" data-ke-type="codeblock"><code>// 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) =&gt; {
  if (err || stats.hasErrors()) {
    console.log(err);
  }
});</code></pre>


<p data-ke-size="size16">그리고 이 파일을 실행시키면 됩니다</p>

<pre id="code_1658218312459" data-ke-language="javascript" data-ke-type="codeblock"><code>node analyze.js</code></pre>










            
            
                </div>
            

                
              </article></div>

나를 찾는 아이

Kyoung min, Kim

이렇게 생긴 화면이 여러분들이 많이 알고 계신 webpack bundle analyzer 입니다
 
웹팩을 통해 번들링한 결과를 시각적으로 보여줘서
 
어떤파일이 용량이 큰지
 
중복되는 패키지는 없는지 체크하여 번들결과물을 최적화하는데 도움을 줍니다
 
 
그런데 CRA(create react app)로 만든앱은 webpack 관련 파일이 내부적으로 react-script로 래핑되어있기 때문에
 
webpack.config.js 파일같은것을 사용할수 없습니다
 
 
이러한 상황에서 webpack-bundle-analyzer를 사용할수 있는 방법을 안내해드려요
 
 
https://www.npmjs.com/package/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

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

댓글