webpack-bundle-analyzer 질문

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1

2-5) 컴포넌트 Lazy Loading (Code Splitting)

해결된 질문

작성

670

안녕하세요!

customize-cra 를 사용해서 config-overrides.js 파일에서
BundleAnalyzerPlugin을 불러와서 사용하는데
계속 에러가 나고 reports 파일을 확인할 수 없어서요 ㅠ

 addWebpackPlugin(
      new BundleAnalyzerPlugin({
        analyzerMode: "static",
        openAnalyzer: true,
        generateStatsFile: true,
        statsFilename: "bundle-report.json",
      })
    ),

위 처럼 작성하고 script에 아래를 추가하고 yarn analyze를 했는데 에러가 나네요;; 뭐가 잘못된 걸까요? 조언 부탁드립니다

    "analyze": "npx webpack-bundle-analyzer build/bundle-report.json",

devtools react

답변 1

유동균

지식공유자

안녕하세요, 760kry 님.

BundleAnalyzerPlugin에 대해서 질문을 주셨는데요,

올려주신 내용만으로는 문제가 무엇인지 파악하기 힘들 것 같습니다.

다만, 몇 가지 궁금한 것은 analyze script에 npx를 넣으셨는데 webpack-bundle-analyzer가 글로벌로 설치되어 있는건가요?

그리고 정확히 어떤 오류가 나는 건가요?

오류가 어떻게 나느냐에 따라서 디버깅 방법이 달라질 수 있겠지만, 우선 별다른 옵션 없이 webpack-bundle-analyzer를 추가했을 때에도 문제가 있는지 부터 확인해보면 좋을 것 같습니다.

그럼 답변이 도움되셨길 바라며 강의에 관심을 가져주셔서 감사합니다.

760kry@gmail.com

질문자

webpack-bundle-analyzer가 글로벌로 설치가 되어있지 않습니다.

제 상황을 설명하면 https://www.npmjs.com/package/customize-cra 를 사용하고
config-overrides.js 파일에서 아래 코드를 추가했습니다.

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

  addWebpackPlugin(
      new BundleAnalyzerPlugin()
    ),

정확히 에러는 아래와 같이 나오는데 제가 사용법을 잘못 사용하는 것 같기도 하고 어디 부분이 잘못된 것인지 파악하기 어려워 질문드렸습니다.

Couldn't read webpack bundle stats from ".../build/bundle-report.json":

Error: ENOENT: no such file or directory, open '.../bundle-report.json'

error Command failed with exit code 1.

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

유동균

지식공유자

음...

우선, 직접적인 에러 원인은 /build/bundle-report.json 파일이 없어서 webpack-bundle-analyzer이 제대로 실행되지 않은 것입니다. 올려주신 에러만으로 알 수 있는 것은 그것까지 입니다.

혹시나 하는 마음에 몇 가지 설명을 드리면,
webpack에 플러그인을 추가하게 되면 해당 코드가 실행될 때(build 또는 start 시에), webpack-bundle-analyzer가 report 파일을 생성해줍니다.(옵션에 따라 서버를 띄워주기도 하고 json 또는 html 파일을 생성해 줍니다.) 그리고 해당 report가 웹페이지로 바로 뜹니다.
이에 대해서는 라이브러리의 analyzerMode 옵션을 살펴보시길 바랍니다.

아무튼 지금 보여주신 에러는 아마
npx webpack-bundle-analyzer build/bundle-report.json
이 스크립트를 실행하면서 발생한 에러인 것으로 보이는데요.

위에서 build를 통해 report.json 파일을 생성하셨다면 이게 정상동작해야하지만, 아마 build를 통해 report.json 파일을 제대로 생성하지 못한 것 같습니다.

그 원인은 작성자 분께서 build를 안 했거나 경로가 잘못되어 report 파일을 제대로 못 찾아갔거나 등등 일 수 있습니다.

인프런 커뮤니티 질문&답변

webpack-bundle-analyzer 질문