As with most things, using RequireJS wrong can be worse than not using it at all.
RequireJS is a modular script loader that lets
few rules we've been used to when downloading resources in the
traditional way on the Web. Not only does RequireJS have great API
documentation, its Why page is a
great read, and explains how they've arrived at their approach of using
In our first dive into things, we put our page enhancements like overlays, autocomplete, and so on into the RequireJS modular system. Shortly into it we noticed some strange behavior where it looked like some of our slower external scripts were blocking even the most simple page interactions from livening up.
The (obvious in hindsight) breakthrough for me came in the realization
that externally hosted, third-party scripts can (and should) be loaded
using RequireJS. Traditionally, we did the most basic optimization of
script tags near the end of the
body tag so they don't
block page render, and then went the added step of putting any analytics
and/or externally hosted scripts below the application scripts so they
get parsed last and don't block page functionality.
What seems to have happened is RequireJS can't actually start executing scripts until all synchronous script calls are done, as there could be additional definitions it has yet to parse. So while we thought saving our third party scripts for the end of the document was a good idea, they were actually executing first, completely throwing a wrench into things. Once it was clear that they can be easily incorporated into the RequireJS dependency model, it was easy enough to create one-line definitions for them and throw those at the end of our global RequireJS definitions. No more blocking!
The final solution, in terms of explicit script tags: