uber/cadence-web

improve webpack packaging

peaaceChoi opened this issue · 0 comments

Hi cadence-web is so convenient web service!!

but cadence.[hash].js file packaged as a webpack is a single file of 6mb at build time and 1mb at web browser. I think it's a fairly large size.

When operating in an internal infrastructure or platform layer such as cadence-web, It can be operated in a complex network environment.(such as VPN..etc), and the performance of web services may be an important issue.

I think improve performance with just a few config modifications of a simple webpack config. check it out below and share if you have a better way.

Tested in production environment mode.

  1. origin build and request.
  • max latency time: 358ms

스크린샷 2021-11-08 오후 9 59 57
스크린샷 2021-11-08 오후 9 59 07

  1. Split file as a chunk, It can improve parallelism.
  • max latency time: 408m

스크린샷 2021-11-08 오후 10 07 05
스크린샷 2021-11-08 오후 10 06 52

  1. Split file + uglyfy, It can improve file compression
  • change in build size: 2.34mb/6.02mb(38%) - sum of current js file /origin js file
  • change in browser response size: 0.624/1.1mb(56%) - sum of current js file /origin js file
  • max latency time: 459ms

스크린샷 2021-11-08 오후 10 04 06
스크린샷 2021-11-08 오후 10 03 50

4.split + ugly + gz compression, It can improve latency

  • change in build size: 2.34mb/6.02mb(38%) - sum of current js file /origin js file
  • change in browser response size: 0.621/1.1mb(56%) - sum of current js file /origin js file
  • max latency time: 323ms

스크린샷 2021-11-08 오후 10 09 26
스크린샷 2021-11-08 오후 10 09 12

In conclusion, if use split file+ uglfy+ gz compression, get a 50% performance boost.