reduce bundle size

[TatsuyaYamamoto]

• Problem

  • each game's bundle.js is non optimized.
    • bundle has game's indivisual code and library in same file.
    • bundle has unnecessary modules.
      • fail tree-shaking?

• TODO

  • check bundled modules
  • reconsider @sokontokoro/mikan's directory structure.
  • reconsider the way to resolve dependencies

[TatsuyaYamamoto]

// dev
$ webpack-bundle-size-analyzer stats.honocar.json
pixi.js: 1.08 MB (23.2%)
  eventemitter3: 8.41 KB (0.763%)
  <self>: 1.07 MB (99.2%)
createjs: 1.01 MB (21.8%)
@firebase/firestore: 949.95 KB (20.0%)
  @firebase/webchannel-wrapper: 66.74 KB (7.03%)
  <self>: 883.21 KB (93.0%)
skyway-js: 478.94 KB (10.1%)
@firebase/auth: 151.46 KB (3.19%)
tippy.js: 143.23 KB (3.01%)
sweetalert2: 116.81 KB (2.46%)
@firebase/app: 74.98 KB (1.58%)
  @firebase/util: 60.19 KB (80.3%)
  <self>: 14.79 KB (19.7%)
i18next: 72.21 KB (1.52%)
resource-loader: 66.8 KB (1.41%)
pixi-sound: 54.75 KB (1.15%)
@firebase/polyfill: 43.65 KB (0.919%)
pixi-gl-core: 38.77 KB (0.816%)
url: 23.08 KB (0.486%)
alertify: 22 KB (0.463%)
earcut: 18.51 KB (0.389%)
punycode: 14.33 KB (0.302%)
animejs: 14.08 KB (0.296%)
style-loader: 13.01 KB (0.274%)
whatwg-fetch: 12.71 KB (0.267%)
i18next-browser-languagedetector: 11.4 KB (0.240%)
eventemitter3: 8.93 KB (0.188%)
tslib: 8.2 KB (0.173%)
loglevel: 7.68 KB (0.162%)
@firebase/logger: 6.75 KB (0.142%)
setimmediate: 6.32 KB (0.133%)
path-browserify: 6.04 KB (0.127%)
spin.js: 6 KB (0.126%)
ismobilejs: 5.36 KB (0.113%)
process: 5.29 KB (0.111%)
querystring-es3: 5.06 KB (0.106%)
bit-twiddle: 4.89 KB (0.103%)
query-string: 4.44 KB (0.0935%)
mini-signals: 4.37 KB (0.0920%)
autobind-decorator: 3.02 KB (0.0636%)
uuid: 2.67 KB (0.0563%)
css-loader: 2.21 KB (0.0464%)
decode-uri-component: 2.17 KB (0.0457%)
firebase: 2.08 KB (0.0438%)
object-assign: 2.06 KB (0.0433%)
timers-browserify: 1.97 KB (0.0416%)
webpack: 1.04 KB (0.0219%)
parse-uri: 994 B (0.0204%)
remove-array-items: 641 B (0.0132%)
strict-uri-encode: 138 B (0.00284%)
node-libs-browser: 0 B (0.00%)
<self>: 196.66 KB (4.14%)

// pro
pixi.js: 1.08 MB (23.2%)
  eventemitter3: 8.41 KB (0.763%)
  <self>: 1.07 MB (99.2%)
createjs: 1.01 MB (21.8%)
@firebase/firestore: 949.95 KB (20.0%)
  @firebase/webchannel-wrapper: 66.74 KB (7.03%)
  <self>: 883.21 KB (93.0%)
skyway-js: 478.94 KB (10.1%)
@firebase/auth: 151.46 KB (3.19%)
tippy.js: 143.23 KB (3.01%)
sweetalert2: 116.81 KB (2.46%)
@firebase/app: 74.98 KB (1.58%)
  @firebase/util: 60.19 KB (80.3%)
  <self>: 14.79 KB (19.7%)
resource-loader: 66.8 KB (1.41%)
pixi-sound: 54.75 KB (1.15%)
@firebase/polyfill: 43.65 KB (0.919%)
pixi-gl-core: 38.77 KB (0.816%)
url: 23.08 KB (0.486%)
alertify: 22 KB (0.463%)
earcut: 18.51 KB (0.389%)
punycode: 14.33 KB (0.301%)
animejs: 14.08 KB (0.296%)
style-loader: 13.01 KB (0.274%)
whatwg-fetch: 12.71 KB (0.267%)
i18next-browser-languagedetector: 11.4 KB (0.240%)
eventemitter3: 8.93 KB (0.188%)
tslib: 8.2 KB (0.173%)
loglevel: 7.68 KB (0.162%)
@firebase/logger: 6.75 KB (0.142%)
setimmediate: 6.32 KB (0.133%)
path-browserify: 6.04 KB (0.127%)
ismobilejs: 5.36 KB (0.113%)
process: 5.29 KB (0.111%)
querystring-es3: 5.06 KB (0.106%)
bit-twiddle: 4.89 KB (0.103%)
query-string: 4.44 KB (0.0935%)
mini-signals: 4.37 KB (0.0920%)
autobind-decorator: 3.02 KB (0.0636%)
uuid: 2.67 KB (0.0563%)
css-loader: 2.21 KB (0.0464%)
decode-uri-component: 2.17 KB (0.0457%)
object-assign: 2.06 KB (0.0433%)
timers-browserify: 1.97 KB (0.0416%)
webpack: 1.04 KB (0.0219%)
parse-uri: 994 B (0.0204%)
firebase: 857 B (0.0176%)
remove-array-items: 641 B (0.0132%)
strict-uri-encode: 138 B (0.00284%)
node-libs-browser: 0 B (0.00%)
<self>: 276.2 KB (5.81%)

[TatsuyaYamamoto]

Honocar has PIXI,js code, but it uses createjs only.

[TatsuyaYamamoto]

reference https://material-ui.com/guides/minimizing-bundle-size/#option-2