Webpack, Dynamic Imports, and You: A Love Story

Transcript

1. Webpack, Dynamic Imports, and You: A Love Story Ember.js Denver Meetup 11/28/18
2. Oh hello I'm Chris. I work for Envoy. I'm going to tell you about a super cool JS feature called dynamic imports and how you can use them with Webpack.
3. Real quick, what's webpack? Webpack is a module bundler. It deals in graphs of modules, not files. Webpack !== Broccoli Broccoli deals in graphs of files. Broccoli and Webpack can, and do, work together!
4. Cool, gimme Easy! ember install ember-auto-import
5. Now import all the things! import Component from '@ember/component'; import MG from 'metrics-graphics'; // magic export default Component.extend({ didInsertElement() { this.createChart(this.data); }, createChart(data) { MG.data_graphic({ title: 'UFO Sightings', description: 'Yearly UFO sightings from the year 1945 to 2010.', data: data, width: 650, height: 150, target: '#ufo-sightings', x_accessor: 'year', y_accessor: 'sightings', markers: [{ year: 1964, label: '"The Creeping Terror" released' }] }); } });
6. Amazing
7. But wait
8. D3 is huge
9. And I only use it on one route what have I done? Before: dist/assets/vendor.js: 730.14 KB (191.93 KB gzipped) After: dist/assets/vendor.js: 1.18 MB (336.21 KB gzipped) That's an extra 450 kb in a production build.
10. If you ship an extra 450 kb to production for a single chart on a single route Alex Russell will literally kill you.
11. plz help
12. Dynamic imports! Dynamic imports... • let you import dependencies lazily, i.e. only when you need them. • return promises • might save you from Alex Russell
13. wut. import('some-dependency').then(module => { let default = module.default; let { named1, named2 } = module; return { default, named1, named2 }; })
14. Ok, but show me IRL import Component from '@ember/component'; // no more MG import export default Component.extend({ didInsertElement() { this.createChart(); }, createChart() { this.MG.data_graphic({ title: 'UFO Sightings', description: 'Yearly UFO sightings from the year 1945 to 2010.', data: this.data, width: 650, height: 150, target: '#ufo-sightings', x_accessor: 'year', y_accessor: 'sightings', markers: [{ year: 1964, label: '"The Creeping Terror" released' }] }); } });
15. But where does MG come from? import Route from '@ember/routing/route'; import ufoSightings from '../data/ufo-sightings'; export default Route.extend({ model() { return import('metrics-graphics').then(module => { return { data: ufoSightings, MG: module }; }); } });
16. Quick Demo
17. Still shipping a bunch of JS, but now you're only sending it when you need it vendor.js: dist/assets/vendor.js: 747.6 KB (196.8 KB gzipped) our graphics lib: dist/assets/chunk.js: 456.58 KB (140.25 KB gzipped)
18. Anything else I should know Check the ember-auto-import README for directions on how to get dynamic imports working. tl;dr There's some eslint config and a babel plugin to add to your ember-cli-build.js. Nothing scary.
19. Thanks!