logo

JEONGGON

    블로그
github
mode
목 차
down-arrow

Webpack Bundle Analyzer

2024.03.21.

post-thumbnail

bundle analyzer

1. bundle analyzer

  • 해당 프로젝트에서 사용하는 모듈의 종류, 모듈 및 gzip 파일의 크기(용량), 경로 등 여러 정보를 파악할 수 있도록 다이어그램을 이용하여 도와줌
  • GitHub - webpack-bundle-analyzer 레포지토리

1-1. 장점

  • 번들 내부에 무엇이 있는지 파악
  • 크기를 많이 차지하는 모듈 파악
  • 최적화
  • 축소된 번들 지원
  • gzip 파일 크기 파악

1-2. 사용하기

- 패키지 설치

  • webpack-bundle-analyzer 패키지 설치
# NPM
$ npm install --save-dev webpack-bundle-analyzer

# YARN
$ yarn add -D webpack-bundle-analyzer

- plugins 설정하기

// webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

// 플러그인 가져오기
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = {
  plugins: [

    // 플러그인 인스턴스 추가
    new BundleAnalyzerPlugin(),
  ]
};

- 서버 실행

  • npm run dev 명령어 실행
  • bundle-analyzer 화면이 함께 실행되는 것을 확인할 수 있고 해당 정보를 통해 최적화를 진행할 수 있음

Webpack_bundle_analyzer
웹 화면과 함께 bundle-analyzer 화면도 실행됨

webpackbundle
profile

조정곤

주니어 프론트엔드 개발자

github
linkedin
instagram
email

< 이전글

Vite 소개

다음글 >

Webpack Resource Asset

Webpack 포스트 (13)

down-arrow
Webpack 소개Webpack importWebpack 폴더 및 파일 구조Webpack Babel LoaderWebpack DevtoolWebpack LoaderWebpack PluginWebpack configWebpack gzipWebpack 개발 서버Webpack 캐싱Webpack Bundle AnalyzerWebpack Resource Asset