Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Honey, I shrunk your Ember app

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.

Simon Ihmig

October 12, 2018
Tweet

Other Decks in Technology

Transcript

  1. KALIBER5 We ❤ Ember We ❤ Open Source We for

    talent www.kaliber5.de www.github.com/kaliber5
  2. WHY DOES IT MATTER? • Download • Parse • Compile

    • Execute 30% of overall time CPU-bound Network-bound
  3. TREE SHAKING // main.js import { foo } from 'foo-bar';

    // foo-bar.js export function foo() { … } export function bar() { … }
  4. CODE SPLITTING /order 30 % /cart 15 % /products 35

    % / 20 % /order 30 % /cart 15 % /products 35 % / 20 %
  5. WHAT TO MEASURE • measure your production build • measure

    after minification (uglify) and compression (gzip)
  6. 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
  7. 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
  8. CUT DOWN ON ADDONS Reduction 26.7KB (5.3%) 452KB Removed liquid-fire

    Was mostly unused, replaced with some CSS transitions
  9. 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
  10. 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)
  11. MANUAL DEAD CODE ELIMINATION Removed unused code Removed unused ember-bootstrap

    components, 
 and in-app components using ember-cli-funnel 452KB
  12. 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
  13. BYE BYE JQUERY • As of Ember CLI / Ember

    3.4 RFC294 is implemented
  14. 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
  15. BYE BYE JQUERY Removed jQuery Removed jQuery from own code,

    „fixed“ 3rd-party addons, replaced ember-ajax with ember-fetch 440KB
  16. 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
  17. 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
  18. Zopfli • 5% better compression • Gzip compatible • Supported

    by all browsers • 80x compression time • Supported by 
 ember-cli-deploy-{gzip,compress} • node-zopfli unmaintained
  19. Brotli • 17% better compression • Supported by all the

    latest modern browsers • But not: IE11, iOS <11
  20. 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
  21. ZOPFLI / BROTLI Reduction 16.4KB (4.5%) 349KB Use Zopfli compression

    for deployment Updated ember-cli-deploy-gzip to use zopfli
  22. ZOPFLI / BROTLI Reduction 62KB (17%) 303KB Use Brotli compression

    for deployment Alternative scenario assuming brotli instead of zopfli