Bundle 용량 최소화(1)

Bundle 용량 최소화(1) - 분석

최적화

by 일단두잇 2023. 1. 22. 14:26

먼전 각 Bundle의 용량을 분석하여 어느곳에서 많은 용량을 차지하고 있는지

확인해야 합니다.

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

webpack-bundle-analyzer

Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap. Latest version: 4.7.0, last published: 3 months ago. Start using webpack-bundle-analyzer in your project by running `npm i webpack-bundle-analyzer`. T

www.npmjs.com

1. webpack-bundle-analyzer 설치

npm i --save-dev webpack-bundle-analyzer

2. webpack설정

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

module.exports = {
  configureWebpack: {
    plugins: [new BundleAnalyzerPlugin()]
  }
}

프로젝트를 실행하면 아래와 같은 분석 화면이 자동으로 실행됩니다.

* 운영 배포 버전에서는 하지않도록 webpack설정을 구분해야합니다.

https://cloud.githubusercontent.com/assets/302213/20628702/93f72404-b338-11e6-92d4-9a365550a701.gif