In this exercise, you will use the ES6 System.import API to implement code splitting. This new API will lazy-load code only when it’s needed in the application rather than during application startup. Kent gives a few hints and then lets the audience work on the exercise. Note: this exercise begins on the FEM/05.0-code-splitting branch
(light music)…- Let's just quickly take a look at the code,…and then I will have an exercise…for you to do code splitting yourself.…So, what we have now, or a couple of things,…we have now a CSS file for .svg,…we have kind of restructured things in our app a little bit,…so now onLoad will call this update todo,…so I moved most of the todo code into the todo.js file,…and it also will add an event listener…on the toggleGraphButton, that was in to click…so that it will toggle your graph on and off.…
And then that toggleGraph is new.…Whoops, if we got to graph index,…this is where I say, again,…it's important to understand how things are resolved…with common JS or ES6 imports as well.…At least, the way that it's resolved with Webpack…is the same as common JS.…So, if you point it to a directory,…it will resolve to the index.js of that directory,…or if it has a packaged JSON,…it will resolve to the main property…of that packaged JSON, "What?"…That's how, actually, you know…your modules are working most of the time.…
But yeah, so here in this graph,…
Author
Kent Dodds
Released
6/14/2017Note: This course was created by Frontend Masters. It was originally released on 8/8/2016. We're pleased to host this training in our library.
- Initializing webpack
- Development vs. production environments
- Debugging webpack
- Loading CSS
- Testing with webpack
- Coverage basics
- webpack optimizations
- Tree shaking
- Code splitting
Skill Level Intermediate
Duration
Views
-
1. Getting Started with webpack
-
Workshop outline6m 43s
-
webpack 1015m 11s
-
Loaders and plugins7m 24s
-
Todo app walkthrough11m 33s
-
Initializing webpack7m 46s
-
Specifying an entry point5m 17s
-
webpack-validator7m 32s
-
webpack dev server9m 19s
-
Path configuration11m 11s
-
Minifying and source maps6m 13s
-
Exercise: Adding webpack2m 28s
-
-
2. Working with webpack
-
Debugging webpack2m 5s
-
Bundling3m 37s
-
Explicit dependencies1m 33s
-
Transpiling with Babel9m 8s
-
Loading CSS4m 12s
-
Hot module replacement10m 37s
-
-
3. Testing with webpack
-
Exercise: Initializing Karma11m 28s
-
Coverage basics6m 31s
-
Exercise: Code coverage10m 4s
-
-
4. webpack Optimizations
-
Exercise: ES6ify1m 22s
-
Tree shaking3m 45s
-
Exercise: Adding tree shaking13m 17s
-
Code splitting5m 12s
-
Exercise: Using System.import()14m 25s
-
Solution: Using System.import()11m 44s
-
Commons chunking2m 32s
-
Exercise: Long-term caching11m 26s
-
Exercise: Extracting CSS, part 210m 11s
-
Offline with service workers12m 28s
-
Deploying to Surge.sh9m 19s
-
Resources25s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Exercise: Using System.import()