search

Kinto / kinto-admin

Kinto Web Administration Console
http://kinto.github.io/kinto-admin/
185 stars 35 forks source link

Minimize bundle size #78

Closed n1k0 closed 5 years ago

n1k0 commented 8 years ago

Idea: by cherry picking react-router imports

https://github.com/reactjs/react-router/blob/master/docs/guides/MinimizingBundleSize.md

leplatrem commented 8 years ago 
                                 Asset     Size  Chunks             Chunk Names
  f4769f9bdb7466be65088239c12046d1.eot  20.1 kB          [emitted]  
448c34a56d699c29117adc64c43affeb.woff2    18 kB          [emitted]  
 fa2772327f55d8198301fdb8bcfc8158.woff  23.4 kB          [emitted]  
  e18bbf611f2a2e43afc071aa2f4e1512.ttf  45.4 kB          [emitted]  
  89889688147bd7575d6327160d64e760.svg   109 kB          [emitted]  
                             bundle.js   688 kB       0  [emitted]  app
                            styles.css   134 kB       0  [emitted]  app
    + 532 hidden modules
leplatrem commented 8 years ago 
$ webpack --config webpack.prod.js --json | webpack-bundle-size-analyzer 

react: 601.26 KB (28.5%)
  object-assign: 1.95 KB (0.324%)
  <self>: 599.31 KB (99.7%)
codemirror: 372.95 KB (17.7%)
react-router: 147.77 KB (7.01%)
  history: 47.26 KB (32.0%)
  <self>: 100.52 KB (68.0%)
react-jsonschema-form: 115.39 KB (5.47%)
kinto-http: 89.1 KB (4.23%)
babel-runtime: 77.95 KB (3.70%)
  core-js: 69.66 KB (89.4%)
  <self>: 8.29 KB (10.6%)
redux-saga: 54.66 KB (2.59%)
webpack: 52.86 KB (2.51%)
  node-libs-browser: 52.61 KB (99.5%)
    url: 26.24 KB (49.9%)
      querystring: 4.51 KB (17.2%)
      <self>: 21.74 KB (82.8%)
    punycode: 14.31 KB (27.2%)
    events: 8 KB (15.2%)
    timers-browserify: 2.06 KB (3.91%)
    process: 2.01 KB (3.82%)
    <self>: 0 B (0.00%)
  <self>: 251 B (0.464%)
react-transform-hmr: 50 KB (2.37%)
  react-proxy: 46.16 KB (92.3%)
    lodash: 28.97 KB (62.8%)
    react-deep-force-update: 1.26 KB (2.74%)
    <self>: 15.92 KB (34.5%)
  global: 243 B (0.475%)
  <self>: 3.6 KB (7.21%)
jsonschema: 43.33 KB (2.06%)
fbjs: 32.19 KB (1.53%)
regenerator-runtime: 22.32 KB (1.06%)
redux: 18.54 KB (0.880%)
redbox-react: 17.05 KB (0.809%)
  react-dom: 63 B (0.361%)
  <self>: 16.99 KB (99.6%)
react-redux: 16.98 KB (0.805%)
  invariant: 1.48 KB (8.72%)
  hoist-non-react-statics: 854 B (4.91%)
  <self>: 14.66 KB (86.4%)
lodash.debounce: 10.85 KB (0.515%)
react-router-redux: 10.75 KB (0.510%)
whatwg-fetch: 10.03 KB (0.476%)
error-stack-parser: 8.48 KB (0.402%)
setimmediate: 6.29 KB (0.298%)
uuid: 5.83 KB (0.276%)
deep-equal: 3.8 KB (0.180%)
filesize: 3.5 KB (0.166%)
stackframe: 3.4 KB (0.161%)
react-codemirror: 2.69 KB (0.128%)
react-transform-catch-errors: 2.41 KB (0.114%)
warning: 1.76 KB (0.0837%)
invariant: 1.48 KB (0.0702%)
query-string: 1.45 KB (0.0686%)
hoist-non-react-statics: 1.35 KB (0.0643%)
classnames: 1.08 KB (0.0510%)
object-assign: 896 B (0.0415%)
isomorphic-fetch: 233 B (0.0108%)
strict-uri-encode: 182 B (0.00843%)
react-dom: 63 B (0.00292%)
bootstrap: 41 B (0.00190%)
<self>: 319.23 KB (15.1%)
leplatrem commented 7 years ago

https://github.com/th0r/webpack-bundle-analyzer

leplatrem commented 5 years ago

Code mirror is huge. But I don't think we'll invest time with this, closing.

$ webpack --config webpack.prod.js --json | webpack-bundle-size-analyzer 
codemirror: 400.51 KB (16.5%)
core-js: 242.52 KB (9.98%)
ajv: 198.04 KB (8.15%)
diff: 179.88 KB (7.40%)
kinto-http: 165.08 KB (6.79%)
react-jsonschema-form: 156.15 KB (6.43%)
react-dom: 93.52 KB (3.85%)
connected-react-router: 77.09 KB (3.17%)
history: 52.57 KB (2.16%)
  warning: 1.76 KB (3.36%)
  <self>: 50.81 KB (96.6%)
react-redux: 43.02 KB (1.77%)
react-router: 42.81 KB (1.76%)
  path-to-regexp: 10.56 KB (24.7%)
  isarray: 120 B (0.274%)
  <self>: 32.14 KB (75.1%)
babel-runtime: 32.81 KB (1.35%)
  regenerator-runtime: 24.66 KB (75.2%)
  <self>: 8.15 KB (24.8%)
@babel/runtime: 31.82 KB (1.31%)
  regenerator-runtime: 24.11 KB (75.8%)
  <self>: 7.71 KB (24.2%)
@babel/polyfill: 24.43 KB (1.01%)
  regenerator-runtime: 23.56 KB (96.4%)
  <self>: 893 B (3.57%)
url: 23.08 KB (0.950%)
react-breadcrumbs: 22.28 KB (0.917%)
redux: 22.26 KB (0.916%)
lodash.topath: 21.97 KB (0.904%)
react-codemirror2: 19.95 KB (0.821%)
node-libs-browser: 19.62 KB (0.807%)
  punycode: 14.33 KB (73.0%)
  process: 5.29 KB (27.0%)
  <self>: 0 B (0.00%)
react-router-dom: 14.13 KB (0.582%)