jungbin-kim / clockify-calculator-chrome-extension Goto Github PK

문제 사항: webpack으로 빌드한 파일의 용량(약 4.2 MB)이 크다. webpack으로 빌드하지 않았을 때 용량(415 KB)에 비해 너무 크다.

• Pure HTML, JS, CSS + minified lib(lodash, moment): 415 KB
• Webpack development mode build: 4.2 MB
• Webpack production mode build: 1.6 MB

Webpack Plugin 중 Webpack BundleAnalyzerPlugin 사용하여 분석. 해당 플러그인 사용하여 빌드할 경우, 분석결과를 자동으로 보여준다.

분석결과: moment.js와 lodash 를 사용하는 popup.js의 용량이 큼.

Moment.js 최적화

moment.js 는 모든 locale이 다 들어가서 용량이 커져 locale 제외한 기본 라이브러리만 넣는 방법을 적용.

• Webpack development mode + MomentLocalesPlugin 사용: 2.9 MB
• Webpack production mode + MomentLocalesPlugin 사용: 570 KB

Moment.js의 대체제를 이용하는 방법도 존재.

Lodash 최적화

lodash-es는 메소드만 사용해서 큰 용량을 차지하지 않을 줄 알았지만, 전체가 다 들어감. lodash 메소드 import 방법 조정 및 LodashModuleReplacementPlugin 적용.

// 메소드 import 방법 1 => development mode에서는 효과가 미미했다.
import { map, reverse } from 'lodash-es'

// 메소드 import 방법 2 => development mode에서는 효과가 대단했다.
import map from 'lodash/map'
import reverse from 'lodash/reverse'

처음에는 메소드 import 방법 1을 사용하였지만 development mode에서는 큰 효과를 볼 수 없었다. (LodashModuleReplacementPlugin README에서는 babel을 사용해야한다는 설명이 있었다.)

• Webpack development mode + MomentLocalesPlugin + 메소드 import 방법 1 + LodashModuleReplacementPlugin(Babel 사용 안함): 2.6 MB
• Webpack production mode + MomentLocalesPlugin + 메소드 import 방법 1 + LodashModuleReplacementPlugin(Babel 사용 안함): 388 KB

Tree shake Lodash Solution 2 ( no babel )을 참고하여 메소드 import 방법 2를 적용해 봄.

• Webpack development mode + MomentLocalesPlugin + 메소드 import 방법 2: 720 KB
  • 플러그인을 사용하지 않고도 큰 효과가 있었다.
• Webpack development mode + MomentLocalesPlugin + 메소드 import 방법 2 + LodashModuleReplacementPlugin(Babel 사용 안함) : 426 KB
• Webpack production mode + MomentLocalesPlugin + 메소드 import 방법 2 + LodashModuleReplacementPlugin(Babel 사용 안함): 388 KB

결국 production mode에서는 같은 파일 용량.

inline source map 제거

배포용

• Webpack production mode + MomentLocalesPlugin + LodashModuleReplacementPlugin(Babel 사용 안함) + source map 제거: 59 KB

Apply Build tool webpack v4

현재는 HTML 태그를 Parsing해서 데이터를 얻고 있으나, API 호출을 하여 데이터를 얻고 싶다.

참고: Clockify API Docs