Honey, I shrunk your Ember app

2a9ae0d13241afce653f9354ca23f012?s=47 Simon Ihmig
October 12, 2018

Honey, I shrunk your Ember app

Ember does not have the best reputation for being suited for mobile apps, mostly for being "too large". But why does size matter, and how can we keep it small? Future techniques like tree-shaking and code-splitting will support this task. But there are quite a few things you can do today to reduce your bundle size.

Based on the experience of optimizing my own app, this talk will guide you through the iterative process of measuring, analyzing and optimizing your app's size. For each of these phases I will introduce you to some essential tools and helpful practical tips.

2a9ae0d13241afce653f9354ca23f012?s=128

Simon Ihmig

October 12, 2018
Tweet

Transcript

  1. 1.
  2. 3.
  3. 4.
  4. 5.
  5. 6.
  6. 7.
  7. 8.

    KALIBER5 We ❤ Ember We ❤ Open Source We for

    talent www.kaliber5.de www.github.com/kaliber5
  8. 9.
  9. 10.
  10. 11.
  11. 12.
  12. 13.
  13. 15.
  14. 18.

    WHY DOES IT MATTER? • Download • Parse • Compile

    • Execute 30% of overall time CPU-bound Network-bound
  15. 20.
  16. 21.

    TREE SHAKING // main.js import { foo } from 'foo-bar';

    // foo-bar.js export function foo() { … } export function bar() { … }
  17. 22.

    CODE SPLITTING /order 30 % /cart 15 % /products 35

    % / 20 % /order 30 % /cart 15 % /products 35 % / 20 %
  18. 28.

    WHAT TO MEASURE • measure your production build • measure

    after minification (uglify) and compression (gzip)
  19. 32.
  20. 35.
  21. 36.

    BROCCOLI-CONCAT-ANALYSER • Visualizes asset sizes and their composition of modules

    • Provides insights on how modules/packages/addons affect the total size • Works with any broccoli-concat based broccoli setup • Not integrated into Ember CLI, troublesome to set up
  22. 39.
  23. 40.
  24. 41.
  25. 46.

    CUT DOWN ON ADDONS • Addons are a double-edged sword

    • Addon size is mostly intransparent • (Nested) dependencies can have a huge effect, e.g. ember-lodash
  26. 50.

    CUT DOWN ON ADDONS Reduction 26.7KB (5.3%) 452KB Removed liquid-fire

    Was mostly unused, replaced with some CSS transitions
  27. 52.

    MANUAL DEAD CODE ELIMINATION • Some addons provide include/exclude functionality.

    • ember-bootstrap • ember-composable-helpers • ember-math-helpers • ember-metrics • Addon developers here? It’s not that hard, using broccoli-funnel
  28. 54.

    MANUAL DEAD CODE ELIMINATION • Use ember-cli-funnel to… • remove

    unused components • remove routes depending on build/deployment target • remove services only used for development/testing (e.g. Mocks)
  29. 55.

    MANUAL DEAD CODE ELIMINATION Removed unused code Removed unused ember-bootstrap

    components, 
 and in-app components using ember-cli-funnel 452KB
  30. 56.

    MANUAL DEAD CODE ELIMINATION Reduction 12.4KB (2.5%) 440KB Removed unused

    code Removed unused ember-bootstrap components, 
 and in-app components using ember-cli-funnel
  31. 57.
  32. 58.

    BYE BYE JQUERY • As of Ember CLI / Ember

    3.4 RFC294 is implemented
  33. 59.

    BYE BYE JQUERY • refactor your application code (ember-ajax ->

    ember-fetch) • refactor your test suite • Use RFC268 based tests • Use @ember/test-helpers instead of global test helpers / this.$() • Codemods can help: 
 ember-qunit-codemod, ember-mocha-codemods, ember-test-helpers-codemod • must not rely on addons still requiring jQuery
  34. 60.

    BYE BYE JQUERY Removed jQuery Removed jQuery from own code,

    „fixed“ 3rd-party addons, replaced ember-ajax with ember-fetch 440KB
  35. 61.

    BYE BYE JQUERY Reduction 31.8KB (6.4%) 408KB Removed jQuery Removed

    jQuery from own code, „fixed“ 3rd-party addons, replaced ember-ajax with ember-fetch
  36. 63.

    KNOW YOUR TARGETS • Supporting older browsers (hint: IE) comes

    at a cost • Transpilation (Babel) and possibly Polyfills (Babel polyfill/core-js) are required for legacy browsers • Today’s evergreen browser support ES2015+ natively
  37. 67.
  38. 69.

    Zopfli • 5% better compression • Gzip compatible • Supported

    by all browsers • 80x compression time • Supported by 
 ember-cli-deploy-{gzip,compress} • node-zopfli unmaintained
  39. 70.

    Brotli • 17% better compression • Supported by all the

    latest modern browsers • But not: IE11, iOS <11
  40. 71.

    ZOPFLI / BROTLI 1. Serve Brotli only • If all

    your target browsers support it, just use Brotli 2. Serve Brotli and Zopfli/Gzip • Generate *.br and *.gz files • Serve the appropriate ones based on Accept-Encoding HTTP header • Not supported by most CDNs 3. Serve Zopli only
  41. 73.

    ZOPFLI / BROTLI Reduction 16.4KB (4.5%) 349KB Use Zopfli compression

    for deployment Updated ember-cli-deploy-gzip to use zopfli
  42. 74.

    ZOPFLI / BROTLI Reduction 62KB (17%) 303KB Use Brotli compression

    for deployment Alternative scenario assuming brotli instead of zopfli