Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Lazy angular w/ webpack

4,972 views

Published on

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

Published in: Technology
  • Be the first to comment

Lazy angular w/ webpack

  1. 1. Lazy Angular with Webpack Rich Snapp <rich@needle.com>
  2. 2. CommonJS require Is easy
  3. 3. Async require Is sometimes useful
  4. 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. 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. 6. Ways to use CommonJS with Angular
  7. 7. Extending an Angular app after bootstrap for lazy-loading
  8. 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. 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. 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

×