如何在一个js文件中组装angularjs项目

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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:

• https://github.com/btford/ngmin
• https://developers.google.com/closure/compiler/