webpack-bundle-analyzer / 번들링 파일 분석!

코드 치는 것만 신경썼지 웹팩에 대해서 전혀 신경을 안 쓰고 있다가 번들링 파일인 chunk-vendor.js 와 app.js가 매우매우 용량이 커서 네트워크 탭 상에서 빠른 3G나 느린 3G로 네트워크 설정을 할 경우 첫 로딩 속도가 어마어마하게 느린 걸 깨달았다. SPA가 가지고 있는 단점을 느낄 수 있게 흰 화면이 30초 넘게 유지됐다ㅋ 어떤 라이브러리가 많은 크기를 차지하는지 알아야 했고, 그것을 최소화해 번들 사이즈를 최적화할 필요가 있었다. 아래의 패키지 도움을 받았다.

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

npm i -D webpack-bundle-analyzer

webpack 설정 상에 설치한 플러그인을 추가해준다. 

이 때 그냥 기본 설정으로 갈 경우엔, 빌드 할 때마다, 또는 devServer를 실행시킬 때마다 웹팩 번들링 사이즈를 시각적으로 보여주는 서버가 자동으로 실행되어서 좀 귀찮아진다. 그렇기 때문에 아래 옵션을 추가해주는게 좋다.

+ 옵션을 추가해주지 않았을 경우 aws 자동 빌드 및 배포 시 에러가 발생했기 때문에 더더욱 옵션을 추가해줘야겠다..

// webpack.config.js

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

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

// vue.config.js 를 쓴다면 아래와 같다.

const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  devServer: {},
  configureWebpack: {
    plugins: [
      new BundleAnalyzerPlugin({
      	analyzerMode: 'static', 
        // default 값은 'server'이다. 귀찮음 방지를 위해 static 으로 설정하자.
        // 웹팩 번들링 파일에 대한 보고서를 브라우저에 표기하기 위해 http서버를 실행시킨다.
        reportFilename: 'bundle-report.html',
        // http서버를 켜볼 수 있는 html 파일의 이름을 설정해줄 수 있다.(dist에 저장된다)
        openAnalyzer: false,
        // default 값은 true이며, 빌드 시 자동으로 브라우저가 열린다. 
        // 이 역시 귀찮기 때문에 false로 설정한다.
        generateStatsFile: true,
        // default 값은 false이며, true 설정 시 보고서를 json으로 생성해서 dist 파일 상에 생성, 저장된다.
        statsFilename: 'bundle-stats.json'
        // 보고서 json 파일명을 설정 가능하다
      }),
    ],
  },
});

해당 번들링 보고서를 통해 web3 라이브러리 크기가 어마어마 하다는 걸 알았다. web3는 고작 해봤자 이더리움의 주소 검증 및 checksum 체크만 해주는 utils 함수만 쓰는데도 해당 web3로 인해 chunk-vendor.js는 2.6MB를 차지했다.

web3를 가져올 때 통으로 가져오는 게 아니라 필요한 메소드를 해당 라이브러리에서 찾아서 가져오니 chunk-vendor.js는 1.6MB로 줄었고, 이런 방식이 번들링 용량을 최소화 해준다는 걸 알았다. 

import Web3 from 'web3' // 지양하자

import { isAddress, checkAddressChecksum } from 'web3-utils/lib';

이렇게 빌드된 파일을 확인하다보니 webpack 에 대해서 공부해야겠단 생각이 들었고 기초적인 거부터 시작해보려고한다.