Imballare i moduli RequireJS "text!" - knockout.js, requirejs, durandal, bundling-and-minification, r.js

Sto cercando di capire se (e come, se è possibile) utilizzare il Strumento di ottimizzazione RequireJS per includere non solo i miei moduli JavaScript, ma anche il mio "testo!" moduli. Sto lavorando su un'app Durandal che utilizza i moduli "text!" Per le viste.

A volte abbiamo utenti che ottengono un timeout cercando di caricare una vista. Ecco un esempio di errore:

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

Ho un'altra domanda che ho appena postato sulla gestione di quel timeout. Non riesco a capire come intercettarlo e riprovare: so che la definizione del modulo è valida, è solo che i clienti potrebbero avere un problema di connettività di rete, soprattutto se sono su un telefono cellulare.

Comunque, come ho continuato a meditare su questo, iorendersi conto che se potessi semplicemente impacchettare l'intera app in un singolo file, potremmo evitare le chiamate HTTP aggiuntive, il che potrebbe ridurre i timeout in questo modo. Significherebbe che l'app si carica, o non lo fa, invece della possibilità di caricare "parzialmente".

Questa app non ha un gran numero di visualizzazioni. Stimo che aggiungere ogni vista aggiungerebbe circa 20kb con la compressione gzip.

Quindi, è possibile impacchettare questi "testi!" moduli in qualche modo?

risposte:

C'è la inlineText costruire l'opzione di configurazione (true per impostazione predefinita) che indica all'ottimizzatore di eseguire esattamente ciò che si desidera. Un avvertimento è che, come con qualsiasi altro modulo, rileverà solo le dipendenze specificate in alcuni moduli define() bloccare. In altre parole, non sarà in grado di rilevare text! dipendenze richieste su richiesta, a meno che non siano rese esplicitamente raggiungibili - ed è qui che sta il tuo problema.

Una soluzione alternativa (tutt'altro che ideale se si hanno molti file di visualizzazione) sarebbe specificare ogni singolo text! dipendenza che usi in include opzione all'interno della configurazione di costruzione, ad esempio:

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

Potresti voler provare weyland, l'ottimizzatore di Durandal. Un esempio di configurazione di weyland-config.js è disponibile in 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"
}
});
}