AngularJS- Динамическая загрузка файлов сценариев с использованием LazyLoad- Webpack

Question

Прямо сейчас на моей странице index.html У меня есть ссылки на два файла CDN, один из которых является JS, а другой - файлом CSS.

т.е. в нижней части моего тела

https://somedomain.com/files/js/js.min.js 

и в голове

https://somedomain.com/files/css/css.min.css 

Но сейчас они не нужны на моей странице, но только в один конкретный маршрут. Итак, я изучал, как я могу ленить загружать эти ресурсы CDN, когда эти маршруты попадают, т. Е. /profile и только тогда?

Они не установлены через bower или npm, а загружаются только через CDN-url, например jquery. Как в Angular 1 и Webpack можно ленить нагрузку, основанную на маршруте?

Answer 1

Здесь вы идете .. Это сделано с использованием oclazyload. Посмотрите ниже код. Plunker связаны ниже

Я модуль Called MYAPP ниже

angular.module('myApp', ['ui.router','oc.lazyLoad']) 
    .config(function ($stateProvider, $locationProvider, $ocLazyLoadProvider) { 
      $stateProvider 
       .state("home", { 
        url: "/home", 
        templateUrl: "Home.html", 
        controller: 'homeCtrl', 
        resolve: { 
         loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) { 
          return $ocLazyLoad.load('homeCtrl.js'); 
         }] 
        } 
       }) 
      .state("profile", { 
       url:"/profile", 
       templateUrl: "profile.html", 
       resolve: { 
         loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) { 
         return $ocLazyLoad.load('someModule.js'); 
         }] 
        } 
      }) 

    }); 

Я другой модуль называется someApp ниже

(function() { 
var mynewapp=angular.module('someApp',['myApp']); 

mynewapp.config(function(){ 

    //your code to route from here! 

}); 
     mynewapp.controller("profileCtrl", function ($scope) { 

      console.log("reached profile controller"); 
     }); 

})(); 

У меня есть реальный Plunker для демонстрации here

Answer 2

У меня есть это JStaticLoader репо, чтобы облегчить загрузку статических файлов всякий раз, когда мне это нужно. Хотя, это не угловато, но вы все равно можете использовать его в своем приложении как directive, прямо назовите его из своего controller или даже в $rootScope, чтобы загрузить нужный js.

JStaticLoader использует чистые js и не требует зависимостей. Он использует XMLHttpRequest для загрузки статических файлов.

В качестве примера использования в вашем app.js (на $routeChangeStart или $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); 
      }); 
     } 
    }); 
}]); 

На образце выше, я получаю js файл с помощью XHR, и добавить его в качестве script в моем document когда он закончил , Затем скрипт будет загружен из кеша вашего браузера.

Answer 3

Строго говорить о Webpack -

Webpack только модуль пакетирование, а не Java-loader.Since это пакеты файлов только из локального хранилища и не загружает файлы из Интернета (за исключением своих собственных кусков) . Хотя другие модули могут быть включены в веб-пакет, который может выполнять тот же процесс.

Я продемонстрирую только некоторые из модулей, которые вы можете попробовать, так как таких существует в Интернете.

Поэтому лучший способ ленивых нагрузки КДС из другого домена будет с помощью Javascript погрузчик - script.js

Он может быть загружен следующим образом -

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

Это возможно потому что скрипт-загрузчик просто оценивает javascript в глобальном контексте.

Список литературы here

Что касается о проблеме отложенной загрузки КДС в угловом приложение

В следующей библиотеке Lab JS сделана специально для этой цели. Это очень просто загрузить и разложить javascript, используя эту библиотеку.

Вот пример, чтобы продемонстрировать

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

ИЛИ

Вы можете использовать require.js

Вот пример, чтобы загрузить JQuery

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

Вы также должны рассмотреть следующий абзац от статьи this.

Загрузка сторонних скриптов async - это ключ для высокопроизводительных веб-страниц, но эти сценарии по-прежнему блокируют загрузку. Потратьте время, чтобы проанализировать свои данные о производительности сети и понять, влияют ли и на то, что эти не очень важные материалы/виджеты/объявления/коды отслеживания влияют на время загрузки страницы.