lazy angular w/ webpack
TRANSCRIPT
CommonJS require
Is easy
Async require
Is sometimes useful
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
Ways to use CommonJS with
Angular
1. require() a factory function
2. require() an angular module
3. require() javascript that extends an existing app
Ways to use CommonJS with
Angular
Extending an Angular app after
bootstrap for lazy-loading
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
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
Other mentions
https://github.com/ocombe/ocLazyLoad
https://github.com/petehunt/webpack-howto
How Instagram.com Works
https://www.youtube.com/watch?v=VkTCL6Nqm6Y