30

I would like to have async loading of angular dependencies in a large application and I'm trying to decide between Browserify or Webpack for this. I know angular 2.0 will support this natively but for now I'm looking for a well supported and popular solution.

Can anyone give advice on which ones works best in an angular team and the most optimal way to structure the project.

Cœur
  • 37,241
  • 25
  • 195
  • 267
Nikos
  • 7,295
  • 7
  • 52
  • 88

2 Answers2

43

At my company, we've switched over from browserify to webpack for a multitude of reasons, lazy loading being one of them.

Putting things in multiple bundles in browserify took some configuration changes as well as special code. Here is a great guide for that http://esa-matti.suuronen.org/blog/2013/04/15/asynchronous-module-loading-with-browserify/

With webpack, adding a new bundle just means an extra entry file line in the configuration's entry file line. Here is a quick guide to that: https://github.com/petehunt/webpack-howto#7-multiple-entrypoints. In the case of lazy-loading, you don't even need to change anything in the configuration file, which is awesome - just use the asynchronous require syntax detailed here: https://github.com/petehunt/webpack-howto#9-async-loading

Here is a template for a setup very similar to what we use at https://bench.co in production. https://github.com/jeffling/angular-webpack-example/

Jeff Ling
  • 1,032
  • 9
  • 12
  • 2
    [Extend version of the Angular Phonecat tutorial with added steps to include webpack and gulp](https://github.com/escapedcat/angular-phonecat-webpack-gulp). Very simple step by step example. – escapedcat Sep 29 '14 at 11:26
  • Thanks Jeff! Any chance you could extend your angular webpack example to show how you can load extra modules or controllers at runtime? – Nikos Apr 06 '15 at 10:04
  • @Nikos No problem :) I might actually leave that out of the example, because I feel like people find it useful now mainly because of it's extreme barebones-ness. Maybe we can talk about that in an issue in the project. Could you make one, and we can chat there? For the record, it's a bit more complicated to lazy load things in runtime because of how the angular module system works. You'll have to combine lazy loading as per pete hunt's example + https://github.com/ocombe/ocLazyLoad – Jeff Ling Apr 06 '15 at 22:26
  • @JeffLing sure I've created a repo to hold this: https://github.com/QuantumInformation/angular-webpack-lazy-loading, although I won't use coffee for it) – Nikos Apr 07 '15 at 14:39
  • I actually meant for us to create an issue, but I like the idea of making a new project that might contain a good example. – Jeff Ling Apr 07 '15 at 22:49
  • @Nikos That's not lazy-loading. [This](http://michalzalecki.com/lazy-load-angularjs-with-webpack/) is lazy-loading. – Gaui Aug 12 '15 at 17:33
-3

Hi you should go with webpack as it supports multiple filetypes (css, js +++), and can separate code in multiple modules.

Tarjei Huse
  • 1,231
  • 11
  • 14