3

I have a huge angularjs app with many .js files.

As far I know browser should open a new connections to reach every single file. File size doesn't matter for performance but opening new connections do.

So that's why I'm looking for a some js-assembler to make single .js file.

I am not sure I should do this in case of angular app? Can anyone advice me which js assembler I should choose?

S Panfilov
  • 16,641
  • 17
  • 74
  • 96
  • What backend tech stack you are using? – Mike Li Jul 15 '13 at 02:39
  • 1
    What you choose doesn't really have to have anything to do with Angular. Pick a solution that works well for your deployment strategy. – Brad Jul 15 '13 at 02:42
  • Actually i have two project with angular. First - REST, based on java backend (spring) and second - REST based on nodejs – S Panfilov Jul 15 '13 at 04:01
  • 1
    see http://stackoverflow.com/questions/360818/which-javascript-minification-library-produces-better-results – sites Jul 15 '13 at 05:49

3 Answers3

5

I think what you really need is a tool doing concatenate and minify or compress JavaScript and CSS assets. Just like asset-pipeline in the Rails world.

As you mentioned you have two projects one's backend is Nodejs, the other is Java, so I will address this question into this two aspects:

  1. Nodejs side

    Just like Antoine said, you can use some building tools like gruntjs(http://www.gruntjs.com/) to write a simple task to concatenate all your js files. Or you can serve the concatenated file from backbend using tools like connect-assets(if you happen use connect web framework), more details please refer this question: Concat and minify JS files in Node.

  2. Java side

    wro4j is pretty handy, which provide pretty much everything you need to deal with assets in Java project. You can check out the details usage in their github page. Other than this, Google Closure Compiler is also a good choice.

You can just use whatever tools you like to concatenate/minify/uglify multiple javascript files, but some tools might provide easy integration or other features(like server dynamically in server side). So please check out each tools and decide which one you want to use.

So all in all, Angularjs's assets management has no difference with any other Javascript framworks/files, except the template async loading.(if you write template in separate files, please make sure front end can access that template file directly and also skipping the concatenate process of template files).

Hope it helps, thanks.

Community
  • 1
  • 1
Mike Li
  • 3,336
  • 2
  • 22
  • 27
4

Take a look at grunt: http://www.gruntjs.com/

This is a tool that can automatize this kind of process, among others (like minifying your files before merging them) really useful for javascript apps development.

Antoine
  • 2,785
  • 1
  • 16
  • 23
  • Grunt looks cute, but it's works with nodejs only, am i right? – S Panfilov Jul 15 '13 at 04:30
  • You need to install it because it's using npm (which is a packet manager, a easier way to install modules) to manage its javascript modules. But you can definitely use it with any javascript projects, either client or server side. – Antoine Jul 15 '13 at 05:04
2

Use ngmin + Closure Compiler

Taken from: http://briantford.com/blog/huuuuuge-angular-apps

...Build Process

Admittedly, this is one thing Angular needs to be better at, and one of my huge aims for 2013 is to help on this front. I've released ngmin, a tool that I hope will ultimately solve the problem of minimizing AngularJS apps for production.

For now, I think your best bet is concatenating your JavaScript files with app.js first, then using ngmin to annotate DI functions, and finally minifying with Closure Compiler with the flag --compilation_level SIMPLE_OPTIMIZATIONS. You can see an example of this at work in the build process for angular.js.

I don't recommend using RequireJS with AngularJS. Although it's certainly possible, I haven't seen any instance where RequireJS was beneficial in practice.

Other links:

Jaider
  • 14,268
  • 5
  • 75
  • 82