RequireJS optimisation en plusieurs modules

J'essaie d'utiliser RequireJS pour modéliser notre JS en quelques fichiers JS plus volumineux afin que les dépendances puissent être chargées à la demande mais sans la nécessité d'un téléchargement JS unique important lors du chargement de la page.RequireJS optimisation en plusieurs modules

À titre d'exemple, les fichiers JS comme:

js/main.js
js/vues/category1/js1.js
js/vues/Category1/js2.js
js/vues/category2/js1.js
js/vues// js2.js Category2

Certaines parties de l'application (par exemple. tout dans la catégorie 1) sont seulement utilisés par certains types d'utilisateurs, et de même avec category2, donc cela n'a pas de sens de tout charger pour chaque utilisateur.

J'essaye une configuration de construction pour r.js pour créer deux modules chargés dynamiquement (category1.js & category2.js) qui contiennent tout le code de leurs fichiers respectifs js1.js et js2.js.

({ 
appDir: './', 
baseUrl: './js', 
dir: './dist', 
modules: [ 
    { 
     name: 'main', 
     exclude: [ 
      "category1", 
      "category2" 
     ] 
    }, 
    { 
     name: "category1", 
     include: [ 
      "views/category1/js1", 
      "views/category1/js2" 
     ], 
     create: true 
    }, 
    { 
     name: "category2", 
     include: [ 
      "views/category2/js1", 
      "views/category2/js2" 
     ], 
     create: true 
    } 
], 
fileExclusionRegExp: /^(r|build)\.js$/, 
writeBuildTxt: false, 
optimizeCss: 'standard', 
removeCombined: true, 
paths: { 
    jquery: 'lib/jquery', 
    underscore: 'lib/underscore', 
    backbone: 'lib/backbone/backbone' 
}, 
shim: { 
    underscore: { 
     exports: '_' 
    }, 
    backbone: { 
     deps: [ 
      'underscore', 
      'jquery' 
     ], 
     exports: 'Backbone' 
    } 
} 
})

Cependant, lors du chargement de la sortie compilée, le navigateur se plaint que ce ne peut pas trouver des vues/category1/js1, vues/category1/js2 et ainsi de suite.

Je ne suis même pas sûr qu'il soit possible de créer quelques modules de haut niveau à partir de plusieurs petits fichiers JS dans RequireJS. Quelqu'un at-il eu une expérience avec cela?

EDIT

main.js:

require.config({ 
    shim: { 
     underscore: { 
      exports: '_' 
     }, 
     backbone: { 
      deps: [ 
       'underscore', 
       'jquery' 
      ], 
      exports: 'Backbone' 
     } 
    }, 
    paths: { 
     jquery: 'lib/jquery', 
     underscore: 'lib/underscore', 
     backbone: 'lib/backbone/backbone' 
    } 
}); 

require([ 
    'views/app', 
    'router' 
], function(AppView, Router) { 
    new Router(); 
    Backbone.history.start(); 
});

index.html:

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <script data-main="js/main" src="js/lib/require/require.js"></script> 
</head> 
<body></body> 
</html>

Le JS1, JS2, fichiers etc sont référencés à partir router.js.

Source

2016-08-17 BB1

Quand vous faites require(['A'], ...) ou vous avez un define(['A'], ..., RequireJS inspecte sa configuration pour résoudre le nom A et construit une URL qu'il utilise pour charger le module A. Il peut essayer de charger quelque chose comme:

http://localhost/js/A.js

Si vous optimisez vos modules afin que A, B, C sont inclus dans un paquet nommé category1, vous avez les possibilités suivantes:

Le paquet category1 est chargé, puis une demande est faite pour A. C'est bien parce que A a été trouvé lorsque category1 a été chargé.
Le lot n'est pas encore chargé mais une demande est faite pour A. C'est un problème car il va résoudre A de la même manière que sans optimisation.Mais vous avez un problème ici car si vous avez optimisé vos modules, alors A n'est plus disponible en dehors de category1 (car removeCombined est true).

La solution consiste à indiquer à RequireJS dans votre configuration d'exécution que l'ensemble contient les modules que vous souhaitez charger. Vous utilisez l'option bundles pour cela. Par exemple:

bundles: { 
    category1: ['A', 'B', 'C'] 
}

Cela dit RequireJS, « quand vous voulez charger le module A, charge category1 et vous le trouverez là-bas ».

Notez que vous n'avez pas à lister tous les modules de l'ensemble. Si vous avez un module X par exemple, et vous savez que les seuls modules qui voudront le charger font partie du même paquet, alors vous n'avez pas besoin de le lister comme un module dans bundles.

Source

2016-08-17 23:02:29 Louis

RequireJS optimisation en plusieurs modules

Répondre

Questions connexes