75

This may be a dumb question for web guys. But I am a little confused over this. Now, I have an application where I am using a couple of Javascript files to perform different tasks. Now, I am using Javascript bundler to combine and minify all the files. So, at runtime there will be only one app.min.js file. Now, Requirejs is used to load modules or files at runtime. So, the question is if I already have all things in one file, then do I need requirejs? Or what is a use case scenario where I can use requirejs and/or bundler?

Please let me know if any further details are needed.

BenMorel
  • 34,448
  • 50
  • 182
  • 322
kunjee
  • 2,739
  • 1
  • 23
  • 38
  • 1
    I don't see why you would need both. Do _you_ think you would? – nnnnnn Sep 02 '12 at 01:50
  • 2
    That is a confusion. When to use what? Or just need to pick one? – kunjee Sep 02 '12 at 01:59
  • Apart from lazy-loading javascripts, doesn't Require also feature dependency injection so that the need for globals is eradicated? Seems to me like Require is still useful inside of a bundled file. Am I wrong? – papiro May 21 '18 at 14:03

3 Answers3

48

Generally you only use RequireJS in its loading form during development. Once the site is done and ready for deployment, you minify the code. The advantage here is RequireJS knows exactly what your dependencies are, and thus can easily minify the code in the correct order. Here is what it says on the RequireJS website:

Once you are finished doing development and want to deploy your code for your end users, you can use the optimizer to combine the JavaScript files together and minify it. In the example above, it can combine main.js and helper/util.js into one file and minify the result.

Matt Greer
  • 60,826
  • 17
  • 123
  • 123
  • 4
    I know this is an old thread, but I stumbled across because I was having similar doubts. So, a followup question, if you don't mind - if we finally bundle everything into one file for deployment then my whole application loads in one shot instead of piecemeal (on demand). Isn't this contradictory to AMD? – Code Poet Dec 11 '13 at 08:07
  • 5
    yes it is, in a sense. But AMD is more theoretical, where as requirejs is also concerned with real world performance issues. Loading each module individually is definitely cleaner and more pure, but will take forever :) – Matt Greer Dec 11 '13 at 19:56
  • 1
    I also put this question to SO see http://stackoverflow.com/questions/20515679/requirejs-to-bundle-or-not-to-bundle/20518314?noredirect=1#20518314. Perhaps a mid point between the two approaches? – Code Poet Dec 11 '13 at 20:45
29

This is a hotly contested issue among many proficient javascript developers. Many other languages have a "compilation" phase where the entire program is bundled up for deployment (JBoss's .WAR files come to mind). Programmers that come from more traditional backgrounds often favor this approach.

Javascript has seen such growth in recent years that it is difficult to chart exact best practices, but those that appreciate the more functional nature of Javascript often prefer the module loading approach (like require.js uses).

I wrote Frame.js which works much like require.js, so my bias is towards the module loader approach.

To answer your question directly, yes, it is one or the other.

Most that argue for packing your scripts into a single file believe it enables more compression and is thus more efficient. I believe the efficiency advantages of packaging are negligible in most cases because: (1) module load times are distributed over the entire session, (2) individual modules can be compressed to nearly the same percentage, (3) individual modules can be cached by the server and routers separately, and (4) loading scripts only when they are needed ultimately allows you load less code for some users and more code overall.

In the long run, if you can see an advantage to dynamic script loading use it. If not, bundle your scripts into a single file.

BishopZ
  • 6,269
  • 8
  • 45
  • 58
  • 6
    While I understand the benefits of keeping the files separately, I think that bundling also reduces the number of http connections required. As pipelining in browsers and servers becomes more widely available, this may matter less, but it's currently a pretty big deal. – Andrew Theken Aug 24 '13 at 12:17
  • 5
    The http connection overhead can mount quickly if the app is large. For our app, when we run it in unpacked mode and load each JS file individually, it takes roughly 15-30 seconds just to load the page. In packed mode it's about one second. – Matt Greer Sep 14 '13 at 17:18
  • a single packed, cached file is obviously much faster than fetching dozens or hundreds of files, which you can never really be sure were loaded, or how long does it take to load them. it is therefore better to dump everything on the client. in most cases this single file isn't going to pass the 1mb size anyway, probably much less after being minified and gzipped. so, single-file FTW. – vsync Oct 11 '15 at 15:30
  • Thousands of strongly-typed classes, and one .swf file, ftw. – Triynko Nov 19 '15 at 14:17
11

It depends on your application. If you're making a server-side app with only modest javascript (less than 100kb minified) then go for total bundling, you're probably going to be fine.

But if you're making a javascript app and have a ton of code in it, then your needs are going to be different.

For example, in my app I bundle all the core files. There's jQuery, underscore, backbone, my main app files, my user login system, my layout system, my notifications and chat system, all are part of my big initial file.

But I have many other modules as well that isn't part of the initial bundle, that are loaded after those.

The forums, the wiki, the wysiwyg, color picker, drag/drop, calendar, and some animation files are part of the second category. You need to make reasonable decisions about what's commonly used and needed immediately vs what can be delayed.

If I include everything immediately I can get above a meg of javascript, which would be insane and make the initial boot unacceptably slow.

The second category starts downloading after initSuccess event fires from the initial file.

But the second category is more intelligent than the first in that it loads what's more important first. For example if you're looking at the wiki it'll load the wiki before it loads the color picker.

Harry
  • 52,711
  • 71
  • 177
  • 261