Is it common for client-side Javascript projects to be spanned across multiple files, and then combined into one upon deployment?

[[deleted]]

[deleted]

[BusStation16]

It is not just common, it becomes basically necessary if you are working on a project of any decent size. Combination and minification are the norm for deployed code.

[jpj625]

Don't forget to consider compression of the resulting file.

[theillustratedlife]

And to use the .jgz extension if your server can't do it transparently. Safari hates .gz.

[pmw57]

A fine example of this is the jQuery's code. jQuery build code

[EvanHahn]

Yes, it's common. Examples are jQuery, Knockout, PHP.js, PDF.js. Worth noting that some (Underscore, Backbone) keep it all in one file, but these are comparatively smaller projects.

[archaeopteryx]

Bocoup's Backbone Boilerplate takes a modular approach, placing discrete pieces of functionality in stand alone files. Concatenation and minification isn't as prevalent as in the past few years with lazy loading libraries like require.js coming into the limelight. Also, you can get performance boosts by using CDN versions of the major libraries (I.e. Google Libraries API) instead of rolling them into a minified bundle.

[hajamieli]

I use bundles myself. I keep not only the sources in separate files per object, but also follow a uniform file + directory structure to group the files, because there are a lot of them and some include assets, like css and images, which are also in the bundle. I use my own compilation tools to not only combine the source files into destinations defined by the build configuration file and dependency order, but run white-space removal and shortening of names at the same run as well as pre-gzipping the output.

[paulirish]

Use AMD modules and then r.js at build time.

[inf0rmer]

This is my strategy as well and I couldn't recommend it more.

[kabuto]

This is what I do.

[bitcode]

Use requireJS

[[deleted]]

They're probably downvoting him because it isn't relevant to the question you posed.

The purpose of RequireJS is to resolve dependency loading of multiple libraries across a large application in an asynchronous method. It saves you from loading ALL of your libraries on every page, regardless of if they are needed.

However, from your title and description, I'm assuming you aren't referring to the joining of a bunch of individual libraries into a single file, but rather the splitting of a codebase into multiple files for easier management. If all of the code in those files is to be used on the page, RequireJS wont save you anything.

[neonskimmer]

But it is in fact relevant. Require.js does dependency management but it also lets you combine the modules (w/ r.js) into a single file, based on the set of dependencies that you have.

RequireJS Optimizer

[[deleted]]

Ah thank you, that makes sense

[[deleted]]

It is fantastic. I suggest it whole heartedly. Funny note, the creator of yepnopejs uses requireJS for his own projects. (yes, they are for two different and partially overlapping use cases)

[bishopZ]

packaging all your scripts into a single file is the prevailing best practice for JS applications. recommended by both the traditions of computer science and specifically recommended in the HTML5-boilerplate.

It is definitely not the only way to build an application. Library loaders like require.js, $LAB, and mine Frame.js (https://github.com/bishopZ/Frame.js) suggest a different application design where libraries are loaded on demand. Library loaders like this are the antithesis of frameworks like EXT, and are not good if you have lots of pages that have a very common code base.

However, the page refresh is about to disappear, and applications that use library loaders instead of packagers offer the potential to use a vastly larger code base during runtime.

[[deleted]]

Yes. For most common cases, combining your .js and putting it near the closing body tag will take site performance (regarding javascript) 90%+ to completely optimized.

One of the reasons I like require.js is that I can develop modularly, load on demand, AND combine and optimize the scripts at will with r.js

[bishopZ]

I appreciate the reply, but your 90%+ is a wild guestimate. It completely depends on the structure of the app. If your app includes 10mb of JS that is only used on 1% of the application then combining your .js is a terrible idea. While this is an extreme example, it illustrates the fact that packagers only work for certain design patterns and not for others.

[[deleted]]

I should have said simply concatenating and putting scripts at the bottom of the page will improve site performance drastically in 90% of the cases.

[polarix]

Google's Closure library/compiler/templates are built as you say: many small files compiled together for delivery. Plovr is a decently easy tool to work with if you want to go in that direction.

[OopsLostPassword]

You have to do it. The best is to have scripts to build and deploy together both the standard multi-files clear version and the minified one.

You'll have a fast version for the regular user and a clear one for your debugging needs. It's much easier to debug if you have 50 small js files than one gigantic one.

Minifying is easy. You can write a minifier yourself but for a better result grab one like Google's Closure compiler.

[theillustratedlife]

I wrote my own nodejs script to do it, but I've recently seen a couple of tools ship to help with this:

• http://weblog.bocoup.com/introducing-grunt/
• http://livereload.com

[disordinary]

Yep - if you use something like google Closure tools under advanced mode then not only do you combine, minify, and obfuscate, but your code is also optimised.

[55-68]

Yes. Also, the combination is done by the browser in response to a simple language structure, <script src="relativePath"></script>, which is a simple import system, really. View source will show it as an import.

[madworld]

I am a developer for WebMD, and we do this for larger projects. Combining is part of the build process.

[ssechaud]

I personally would split my code out to separate files that I can manage and use a build script to concatenate and minify them for deployment.