22

I'm working on a big angluar project and obviously we need a way to lazy load our scripts.

I've worked with require.js before and it's quite good, but the problem is that after we concatenating and minifying our files, we got a 1.5M js file.

So i just encountered OcLazyload and it looks promising but i saw a lot of examples on the web that use both require and ocLazyLoad, I'm a bit confused as to why you would want to use both. Aren't they both doing the same thing?

Tomer
  • 17,787
  • 15
  • 78
  • 137
  • 1
    Note that using RequireJS you can load some files on demand, i.e. only when you actually need them (for instance in a directive or the like). So keep your "minified" bundle small with only what need to be loaded initially. – floribon Jan 29 '15 at 20:20
  • @floribon - but OcLazyLoading does the same and it can even integrate with ui-router and load files per state – Tomer Jan 29 '15 at 20:28
  • 3
    I was answering your concern about the bundle size. But I didn't know about ocLazyLoading and it sounds awesome because I've always wanted to do that. They are not mutually exclusive, and ocLazyLoading needs a dependencies manager engine, which defaults to $script.js but apparently you can use RequireJS, so my take would be to use both. – floribon Jan 29 '15 at 23:14

2 Answers2

31

You can use RequireJS with ocLazyLoad but I don't recommend it, it's just possible because people asked me to do it and it was easy to integrate. You don't need RequireJS because ocLazyLoad includes its own loaders for js/css/templates files, and it can load any kind of files, not just angular modules.

If you want to lazy load Angular modules you will need a lib to register them with Angular (or wait Angular 1.5 that will allow you to do it).

Bottom line is: you can use RequireJS with ocLazyLoad, or just ocLazyLoad (recommended), but you can't use just RequireJS

Olivier
  • 1,270
  • 1
  • 10
  • 24
  • Great explanation. But I had doubt while implementing oclazyload. Using oclazyload, it is easy to load. when comes to load dependencies, in require js, if i mentioned deps in shim, it'll automatically load the dependency. But In oclazyload, I've to mention manually each dependency for each routing. Is there any code reusing like requirejs for loading dependencies? – Jeeva J Oct 08 '15 at 06:15
  • I think requirejs maintaining the dependencies. It easy to main in the code for dependencies. OcLazyLoad with requirejs will give better one to mange code and for reusablity. – Jeeva J Oct 08 '15 at 06:53
  • 2
    Thanks @Oliver it was a nice explanation. And I wrote a blog on that too https://goo.gl/aEUWVt. – Dhiren Feb 25 '16 at 10:23
  • Although a legacy, you will need requireJS to specify the exact order in which you want to load the dependencies asynchronously. This I believe is not supported by ocLazyLoad. Also you won't be able to organize the file structure such as "modules/feature1/feature1Module.js","modules/feature1/feature1Controller.js","modules/feature1/feature1Service.js". – Anirudha Aug 06 '17 at 19:49
18

You need both ocLazyLoad and RequireJS because with you now deal with two separate module concepts - your javascript modules and the angular internal modules.

After the initial bootstrap, angularjs doesn't allow registering new modules and components like directives and controllers anymore (at least not using the standard way).

RequireJS only loads javascript files but it doesn't register the new angular modules and components in this new code

What ocLazyLoad does is to allow you to load your additional files using a third party module loader like RequireJS and the more important thing - it registers in angular the new modules and components in the lazily loaded code.

In summary - you can lazily load code using only RequireJS, but you can't load angular modules and components only using RequireJS. There is a need for extra work, like this performed by ocLazyLoad.

Adrian Mitev
  • 4,722
  • 3
  • 31
  • 53