BH] 웹 성능 최적화 webpack-bundle-analyzer 사용

시스템을 개발하고 계속 개발하고 정신없이 개발하다보면, 필요없이 용량만 늘릴경우가 있어요. 이럴경우 웹성능은 떨어지겠죠?... 최적화가 필요한 시점이 올거예요. 

바쁜 와중에 최적화까지 신경쓰면서 작업하면 정말 좋겠지만,,,,,,,(파이팅)

SPA같은 경우 모든 파일을 다 불러오는데... 이렇게 되면....첨에 로딩하면 화면이 계속 하얗게 나오거나 로딩바를 넣었으면 하루종일(?)  장시간 로딩하다가 랜더링하게 될거예요.

그래서 이번에 최적화를 좀 해봐야겠다는 생각이 들어서 요래조래 작업을 시작했습니다.

 

일단 최적화를 하기 위해서는 어느 부분부터 손대야할지 막막 할 수도있어요. 프로젝트 크기가 작으면..최적화할게 없을 수도있겠네요.

아무튼 최적화를 하기 위해서 webpack-bundle-analyzer 이것을 사용했습니다.

최적화의 과정을 아래와 같이 진행했습니다.

• webpack-bundle-analyzer 어떤 부분이 용량을 많이 차지하고 있는지
• code split은 되어있는지
• garbage 제거

 

webpack-bundle-analyzer

# NPM
npm install --save-dev webpack-bundle-analyzer

npm install --save laravel-mix-bundle-analyzer //laravel-mix를 사용하지 않을 경우 굳이 설치하지 않아도 된답니다.

# Yarn
yarn add -D webpack-bundle-analyzer

 

webpack.mix.js

require('laravel-mix-bundle-analyzer');

if (!mix.inProduction()) {
  mix.bundleAnalyzer();
}

 

webpack.config.js

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

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

 

이후 빌드를 하게 되면 webpack-bundle-analyzer 실행됩니다.

아래와 같이 설치되어있는 패키지들이 있습니다.

마우스를 올려보면 패키지에 대한 자세한 내용이 나오네요.

http://127.0.0.1:8888/

aws-amplify같은 경우는 전체에 5.61mb이네요. ㅠㅠ

aws-amplify

이렇게 제일 무거운 애들은 화면에서 크게 표시가 되고 작은애들은 엄청 작게 보여요.

이 기준으로 크게 표시된 아이들만 잘 확인해서 대채가능한 패키지가 있으면 변경하고 사용하지않으면 지우고

최적화를 할 수 있으면 최적화를 하셔야해요.

최적화를 계속 진행하다 빌드를 해보시면 확실히 차이가 있을거예요.

최적화 하기전에는 5MB였어요.

작업 전

최적화 후에는 4MB네요.

작업 후

물론 사용환경이 좋은 곳에서는 얼마나 차이가 날까요?

별로 차이 없을 것 같습니다..

사용환경이 좋지 않은 곳에서는 최적화의 효과가 좀 나타나지않을까 싶어요.

 

code split

import T from 'T'

이렇게 불러와서 사용할 경우 T 패키지가 1MB면 고스란히 다 들고 오게되어요.

그렇게 되면 정작 사용하는건 몇개 안되는데 시스템만 무겁게 만드는 꼴이 되어버리죠.

그래서 필요한 기능 import해서 사용하는게 나을 것 같아요. 

import { T1, T2 } from 'T'

물론 이게 항상 정답은 아닐 수도있어요.

 

아 그리고 vue.js 같은 경우에는 component를 비동기 방식으로 호출해서 랜더링 속도를 높이는 방법도 있어요.

garbage 제거

정말 필요없는 파일들은 지워주는게 좋을 것 같아요.

귀찮아서 잘 관리는 안하고있었지만, 이번기회에 다 지워보기로 했어요.

어차피 github가 있으니깐 괜찮을거랍니다.