Packaging up RequireJS "text!" modules

Question

I'm trying to figure out if (and how, if it's possible) to use the RequireJS optimization tool to include not only my JavaScript modules, but also my "text!" modules. I'm working on a Durandal app that uses "text!" modules for views.

Sometimes we have users who get a timeout trying to load a view. Here's an example error:

Error: Load timeout for modules: text!views/primaryapplicants.html
http://requirejs.org/docs/errors.html#timeout

I've got another question I just posted about handling that timeout. I can't figure out how to intercept it and try again. I know the module definition is valid, it's just that customers may have a network connectivity issue--especially if they're on a cell phone.

However, as I've continued to ponder this, I realize that if I could simply package the entire app up into a single file, then we could avoid the extra HTTP calls--which might cut down on timeouts like this. It would mean the app either loads, or it doesn't--instead of the possibility of "partially" loading.

This app does not have a large number of views. I estimate that adding every view would add around 20kb with gzip compression.

So, is it possible to package these "text!" modules up somehow?

Answer 1

There is the inlineText build config option (true by default) which instructs the optimizer to do exactly what you want. One caveat is that it will, just like with any other module, only detect dependencies specified in some module's define() block. In other words, it won't be able to detect text! dependencies which are requested on demand, unless they're made reachable explicitly - and this is where your problem lies.

One workaround (far from ideal if you have many view files) would be to specify every single text! dependency you use in the include option inside your build config, e.g.:

// ...
include: ["text!views/primaryapplicants.html",
  "text!views/secondaryapplicants.html",
  // etc.
]
// ...

Answer 2

You might want to give weyland, Durandal's optimizer a try. An example weyland-config.js configuration can be found in the HTML StarterKit.

https://github.com/BlueSpire/Durandal/blob/master/platforms/HTML/StarterKit/weyland-config.js

exports.config = function(weyland) {
    weyland.build('main')
        .task.jshint({
            include:'app/**/*.js'
        })
        .task.uglifyjs({
            include:['app/**/*.js', 'lib/durandal/**/*.js']
        })
        .task.rjs({
            include:['app/**/*.{js,html}', 'lib/durandal/**/*.js'],
            loaderPluginExtensionMaps:{
                '.html':'text'
            },
            rjs:{
                name:'../lib/require/almond-custom', //to deploy with require.js, use the build's name here instead
                insertRequire:['main'], //not needed for require
                baseUrl : 'app',
                wrap:true, //not needed for require
                paths : {
                    'text': '../lib/require/text',
                    'durandal':'../lib/durandal/js',
                    'plugins' : '../lib/durandal/js/plugins',
                    'transitions' : '../lib/durandal/js/transitions',
                    'knockout': '../lib/knockout/knockout-2.3.0',
                    'bootstrap': '../lib/bootstrap/js/bootstrap',
                    'jquery': '../lib/jquery/jquery-1.9.1'
                },
                inlineText: true,
                optimize : 'none',
                pragmas: {
                    build: true
                },
                stubModules : ['text'],
                keepBuildDir: true,
                out:'app/main-built.js'
            }
        });
}