This document discusses using CommonJS modules with Angular applications using Webpack. Webpack allows using CommonJS and AMD modules in the browser and supports loaders for non-JavaScript files. There are several ways to use CommonJS with Angular, including requiring factory functions, Angular modules, and code that extends existing apps. Webpack also supports lazy loading modules asynchronously for code splitting, which can improve performance of large Angular apps.

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