investigate file sizes of generated js

[edeustace]

The generated js files can be pretty huge .. investigate what's contributing to that size and see if there are any optimizations to be made.

[edeustace]

Was just inspecting corespring-choice. The bundle size was coming in at: 3.1 mb.

I found that it was bundling 3 lodash modules:

    ./node_modules/.bin/webpack --config .client.webpack.config.js --json | ./node_modules/.bin/webpack-bundle-size-analyzer
    lodash: 635.22 KB (20.6%)
    react-dom: 569.34 KB (18.5%)
    pie-player: 528.63 KB (17.2%)
      lodash: 524.4 KB (99.2%)
      <self>: 4.24 KB (0.801%)
    pie-controller: 526.23 KB (17.1%)
      lodash: 524.4 KB (99.7%)
      <self>: 1.83 KB (0.347%)
    material-ui: 351.91 KB (11.4%)
    react: 146.63 KB (4.76%)
    inline-style-prefixer: 56.87 KB (1.85%)
    lodash.merge: 56.82 KB (1.84%)
    core-js: 41.13 KB (1.33%)
    fbjs: 35.95 KB (1.17%)
    corespring-choice: 22.23 KB (0.722%)
    bowser: 16.56 KB (0.538%)
    pie-scoring: 14.71 KB (0.477%)
    lodash.throttle: 13 KB (0.422%)
    recompose: 8.59 KB (0.279%)
    react-event-listener: 8 KB (0.260%)
    corespring-correct-answer-toggle: 7.99 KB (0.259%)
    react-tap-event-plugin: 7.29 KB (0.237%)
    style-loader: 6.99 KB (0.227%)
    <self>: 27.15 KB (0.881%)

I bumped the lodash version in corespring-correct-answer-toggle, pie-player and pie-controller - and that left us with 1 lodash (file size now 2.1mb).

    ./node_modules/.bin/webpack --config .client.webpack.config.js --json | ./node_modules/.bin/webpack-bundle-size-analyzer
    lodash: 635.22 KB (31.3%)
    react-dom: 569.34 KB (28.0%)
    material-ui: 351.91 KB (17.3%)
    react: 146.63 KB (7.21%)
    inline-style-prefixer: 56.87 KB (2.80%)
    lodash.merge: 56.82 KB (2.80%)
    core-js: 41.13 KB (2.02%)
    fbjs: 35.95 KB (1.77%)
    corespring-choice: 22.23 KB (1.09%)
    bowser: 16.56 KB (0.815%)
    pie-scoring: 14.71 KB (0.724%)
    lodash.throttle: 13 KB (0.640%)
    recompose: 8.59 KB (0.423%)
    react-event-listener: 8 KB (0.394%)
    corespring-correct-answer-toggle: 7.97 KB (0.392%)
    react-tap-event-plugin: 7.29 KB (0.359%)
    style-loader: 6.99 KB (0.344%)
    babel-runtime: 6.17 KB (0.304%)
    pie-control-panel: 5.48 KB (0.269%)
    process: 5.17 KB (0.255%)
    <self>: 16.39 KB (0.806%)

However - we should be trying to only pull in the parts of lodash that we are using.

There would also be an argument for allowing the configuration of externals, like in the example above we could configure lodash, react, react-dom and the generated js would be alot smaller (with the need for those libs to be loaded onto the same page).

Was looking at running uglifyjs - getting an error atm: joeeames/WebpackFundamentalsCourse#3

Also need to look at tree shaking.

[edeustace]

Notes here: https://github.com/PieLabs/pie-cli/wiki/optimization

[edeustace]

Uglify error is because is cant minify es6 see: mishoo/UglifyJS#448