AngularJS-chargement dynamique de fichiers de script en utilisant LazyLoad - Webpack

j'ai ceci JStaticLoader repo, à l'aise moi le chargement des fichiers statiques chaque fois que j'en ai besoin. Cependant, il n'est pas angularized, mais vous pouvez toujours l'utiliser dans votre application comme un directive, appel direct à partir de votre controller ou encore $rootScope pour charger votre choix js.

JStaticLoader utilise js pur et ne nécessite aucune dépendance. Il utilise XMLHttpRequest pour charger les fichiers statiques.

comme exemple utilisez dans votre app.js (sur $routeChangeStart ou $stateChangeStart)

myApp
.run(['$rootScope', '$http', function ($rootScope, $http) {
    var scriptExists = function (scriptId) {
        if (document.getElementById(scriptId)) {
            return true;
        }

        return false;
    };

    var addLazyScript = function (scriptId, url) {
        if (scriptExists(scriptId)) return;

        var js = document.createElement('script'),
            els = document.getElementsByTagName('script')[0];

        js.id = scriptId;
        js.src = url;
        js.type = "text/javascript";

        els.parentNode.insertBefore(js, els);
    };

    $rootScope.$on('$routeChangeStart', function (e, current) {
        if (current.controller === 'MainCtrl') {
            var pathUrls = ["https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.js"],
                scriptId = 'lazyScript1';

            if (scriptExists(scriptId)) return;

            JStaticLoader(pathUrls, { files: ['js'] }, function (vals, totalTime) {
                /* Success */
                for (var i = 0; i < vals.length; i++) {
                    var path = vals[i];
                    addLazyScript(scriptId, path);
                }
            }, function (error, totalTime) {
                /* Error */
                console.warn(error, totalTime);
            });
        }
    });
}]);

Sur l'exemple ci-dessus, j'obtiens un js fichier en utilisant xhr, et l'ajouter comme un script dans mon document une fois terminé. Le script sera ensuite chargé à partir du cache de votre navigateur.

strictement parlant du Webpack -

Webpack est juste un module bundler et pas un chargeur javascript.Depuis qu'il empaquette des fichiers uniquement à partir du stockage local et ne charge pas les fichiers à partir du web(sauf ses propres morceaux).Bien que d'autres modules peuvent être inclus dans le webpack qui peut faire le même processus.

je vais le démontrer seulement certains modules que vous pouvez essayer,comme il ya beaucoup de ces définie sur l' Web.

par conséquent, une meilleure façon de charger paresseusement le cdn à partir d'un autre domaine serait d'utiliser le javascript chargeur - script.js

il peut être chargé de la manière suivante -

var $script = require("script.js");
 $script = ("https://somedomain.com/files/js/js.min.js or https://somedomain.com/files/css/css.min.css",function(){
 //.... is ready now
});

C'est possible parce que le script-chargeur évalue juste le javascript dans le contexte global.

Références ici

concernant la question du chargement paresseux du cdn dans l'application angulaire

La suite de la bibliothèque Laboratoire de JS est faite spécifiquement à cet effet. Il devient très simple de charger et de bloquer le javascript en utilisant cette bibliothèque.

Voici un exemple pour démontrer

<script src="LAB.js"></script>
  <script>
    $LAB
     .script("/local/init.js").wait(function(){
       waitfunction();
     });
  <script>

OR

Vous pouvez utiliser le besoin.js

Voici un exemple de charger jquery

require.config({
    paths: {
        "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min"
    },
    waitSeconds: 40
  });

Vous devriez également considérer les points suivants paragraphe à partir de l'article.

chargement de scripts tiers async est la clé pour avoir des pages web haute performance, mais ces scripts bloquent tout de même onload. Prenez le temps d'analyser vos données de performance web et de comprendre si et comment ces contenus/widgets/annonces/codes de suivi moins importants ont un impact sur les temps de chargement des pages.