what (amd) script loader to use for mobile site

问题:

I'm starting work on a new version of a mobile site. I am looking into using an amd script loader and have pretty much narrowed it down to require and lsjs. I know there are many pro's and con's to both, but I am trying to figure all of those out for the mobile version of my site. Does anyone have experience with this lib's at the mobile level? Just trying to get a discussion going here of what people think the best way to go is. (anyone with a 1500 rep want to create an lsjs tag :) ). Maybe either of the creators of these libraries (todd burke or richard backhouse) have an opinion on this

thanks

EDIT:

thanks to Simon Smith for the great info down below. has anyone used lsjs? it looks very promising in terms of speed, but does not have the user base, documentation, or (i think) features of require/curl, but still looks very promising

回答1:

I would say use RequireJS until you're ready to go to production. Then compile your scripts and replace RequireJS with Almond. It's a bare-bones library made by James Burke (author of RequireJS) so you can rely on it to work seamlessly:

Some developers like to use the AMD API to code modular JavaScript, but after doing an optimized build, they do not want to include a full AMD loader like RequireJS, since they do not need all that functionality. Some use cases, like mobile, are very sensitive to file sizes.

By including almond in the built file, there is no need for RequireJS. almond is around 1 kilobyte when minified with Closure Compiler and gzipped.

https://github.com/jrburke/almond

EDIT:

Curl.js is also an option. I haven't used it but know that is a lot smaller than RequireJS. Did a bit of research as to why:

RequireJS does the following over Curl (via James Burke):

• Supports multiversion/contexts, useful for mock testing, but you can get by without it
• Supports loading plain JS files via require, does not have to be an AMD module
• Supports special detection and work with older versions of jQuery (should not be an issue if you use jQuery 1.7.1 or later)
• (At the moment) better support for simplified wrapped commonjs style: define(function(require) {});

In short, if you are only going to deal with AMD modules in your app, do not need the multiversion/context support, and are not using the simplified commonjs wrapping style, or using an older jQuery, then curl can be a good choice.

https://groups.google.com/forum/?fromgroups=#!topic/requirejs/niUyLZrivgs

And the author of Curl:

RequireJS runs in more places than curl.js, including WebWorkers and node.js. It's also got more "battle testing" than curl.js, which may mean it has less bugs around edge cases. curl.js is also missing a few important features, such as preloading of implicit dependencies and support for AMD-wrapped commonjs modules. These are both coming in version 0.6 (late next week).

On the plus side, curl.js...

is as small as 1/4 the size of RequireJS -- even when bundled with the js! and domReady! plugins it is still less than half the size.

is faster at loading modules than RequireJS, but only meaningfully so in IE6-8 or in development (non-build) environments.

supports pluggable module loaders for formats other than AMD (we're working on unwrapped CJSM/1.1 and CJSM/2.0, for instance).

supports configuration-based dependency management via IOC containers like wire.js (via cram.js).

supports inlining of css (via cram.js) and concatenation of css (via cram.js 0.3 by end of year)

https://github.com/cujojs/curl/issues/35#issuecomment-2954344

回答2:

Back in 2014 I faced the same problem. I had some extra requirements though in order to make the site fast on mobile:

• Small enough to be inlined (to avoid paying an extra request-tax to get the loader onboard).
• Inlined config file (get rid of a request).
• Config file in pure javascript (no parsing overhead).
• Let the browser do the actual loading (browsers are smart these days) of files.
• Connect all asynchronously loaded modules together.
• Support for single page apps that include legacy code that uses sprinkled $(function(){...}) constructs, yet I insist on loading jQuery late and asynchronously to speed things up.

After evaluating RequireJS, curl, lsjs and a bunch of others, I concluded that none of them came close enough to what I needed for my projects. Eventually I decided to create my own lockandload AMD-loader. I didn't open-source it at the time, because that meant writing documentation. But I recently open-sourced it with fresh docs in case it benefits others.