Conditionnement RequireJS "text!" modules

Question

J'essaie de comprendre si (et comment, si c'est possible) d'utiliser le RequireJS optimization tool pour inclure non seulement mes modules JavaScript, mais aussi mon "texte!" modules. Je travaille sur une application Durandal qui utilise "texte!" modules pour les vues.

Parfois, nous avons des utilisateurs qui obtiennent un délai avant de charger une vue. Voici un exemple d'erreur:

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. Je n'arrive pas à comprendre comment l'intercepter et essayer à nouveau. Je sais que la définition du module est valide, c'est juste que les clients peuvent avoir un problème de connectivité réseau - surtout s'ils sont sur un téléphone portable. Cependant, comme j'ai continué à réfléchir à cela, je me rends compte que si je pouvais simplement emballer l'ensemble de l'application dans un seul fichier, nous pourrions éviter les appels HTTP supplémentaires - qui pourraient réduire les délais comme celui-ci . Cela signifierait que l'application soit chargée, ou non - au lieu de la possibilité de chargement "partiel".

Cette application n'a pas un grand nombre de points de vue. J'estime qu'ajouter chaque vue ajouterait environ 20kb avec la compression de gzip.

Donc, est-il possible d'empaqueter ces "textes!" modules en quelque sorte?

Answer 1

Il existe le inlineText build config option (true par défaut) qui indique à l'optimiseur de faire exactement ce que vous voulez. Une mise en garde est que, comme avec n'importe quel autre module, il ne détectera que les dépendances spécifiées dans le bloc define() de certains modules. En d'autres termes, il ne sera pas capable de détecter les dépendances text! qui sont demandées à la demande, sauf si elles sont rendues accessibles explicitement - et c'est là que réside votre problème.

Une solution de contournement (loin d'être idéal si vous avez beaucoup de fichiers de vue) serait de spécifier chaque text! que vous utilisez dans la dépendance de la include option dans votre configuration de construction, par exemple:

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

Answer 2

Vous voudrez peut-être donner Weyland , L'optimiseur de Durandal un essai. Un exemple de configuration de weyland-config.js peut être trouvé dans le StarterKit HTML.

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' 
      } 
     }); 
}