A brief introduction to code-splitting in Webpack and async module loading in Angular

1. Lazy Angular with
Webpack
Rich Snapp <rich@needle.com>

2. CommonJS require
Is easy

3. Async require
Is sometimes useful

4. Webpack
Allows us to use these modules in the browser
Supports both CommonJS and AMD
Supports loaders (load more than just Javascript)
http://webpack.github.io/docs/list-of-loaders.html

5. Ways to use CommonJS with
Angular
1. require() a factory function
2. require() an angular module
3. require() javascript that extends an existing app

6. Ways to use CommonJS with
Angular

7. Extending an Angular app after
bootstrap for lazy-loading

8. Let’s see some demos
https://github.com/snapwich/lazy-angular-demo
checkout “sync” and “async” tags
https://github.com/snapwich/lazy-angular
a simple wrapper around angular.module

9. Code splitting
Happens automatically in Webpack with async requires
Most commonly implemented at client-side router but can
happen anywhere an async action can occur, such as in
event handlers or during directive life-cycles.
Can also be specified with multiple entry points
Can be optimized with additional Webpack plugins

10. Other mentions
https://github.com/ocombe/ocLazyLoad
https://github.com/petehunt/webpack-howto
How Instagram.com Works
https://www.youtube.com/watch?v=VkTCL6Nqm6Y