search

pie-framework / pie-cli

the main pie-cli
ISC License
2 stars 2 forks source link

investigate file sizes of generated js #69

Open edeustace opened 7 years ago

edeustace commented 7 years ago

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 commented 7 years ago

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: https://github.com/joeeames/WebpackFundamentalsCourse/issues/3

Also need to look at tree shaking.

edeustace commented 7 years ago

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

edeustace commented 7 years ago

Uglify error is because is cant minify es6 see: https://github.com/mishoo/UglifyJS2/issues/448