lazy angular w/ webpack

Lazy Angular with

WebpackRich Snapp <rich@needle.com>

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