Work with large JavaScript applications

Question

Our file structures are pretty good, organizing functionality in separate folders. My question is how others work on applications that include over 500 JavaScript files.

We created the maven plugin to merge these files together (the YUI compressor also works). However, this requires 3-10 seconds of compilation for each change.

This step is necessary for organizing a large application, I feel that a well-structured HTML file pulled into all these resources will save me 45 minutes every day.

Answer 1

For my wireframe projects , usually monitoring, testing or services on the page to organize other toolboxes (but not as high as your number of files), my approach was aimed at separate and dynamically loaded files during development. For the test, I started one assembly for compression and version of individual files and checked individual files again, because, depending on the concatenation order, compression technique and browser, I can complete the script error, and it’s a pain to dig it out of one monster file. Thirdly, I will unite and try again.

In an HTML link, I will either target an uncompressed file that loads certain dependencies, or a compound file. A separate boot file names dependencies that are either included in the compound file or loaded dynamically as needed.

This way, I can add or modify the file and start development and testing without rebuilding.

Answer 2

The solution is likely to be concatenated and compressed only for testing and user production.

For development, it's probably best to just import them into an HTML file. This speeds up the dev process and also simplifies debugging. It also allows the browser to cache some of these files.

If you cannot rely on cached copies (which, with 500 files, I don’t think it will be very common), this will slow down the load time.

Answer 3

You will probably save a lot of time by running only the compressor. The YUI compressor is known to be slow because it uses the Java Rhino interpreter to actually parse JavaScript and parse it, etc.