component - AngularJS- Carga dinámica de archivos de script utilizando LazyLoad- Webpack

webpack angularjs

Question

Ahora mismo, en mi página index.html tengo enlaces a dos archivos CDN, uno es un JS y el otro un archivo CSS.

es decir, en la parte inferior de mi cuerpo

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

y en la cabeza

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

Pero en este momento no son necesarios en mi página de inicio, solo en una ruta en particular. Entonces, ¿estaba investigando cómo puedo cargar de forma perezosa estos recursos CDN cuando esas rutas se encuentran en ie /profile y solo entonces?

Estos no se instalan vía bower o npm, solo se cargan a través de la URL de CDN, por ejemplo jquery. ¿Cómo en Angular 1 y Webpack puedo cargar de forma lenta en función de una ruta?

Answer 1

Aquí tienes ... Es posible usar oclazyload . Echa un vistazo al siguiente código. Un plunker vinculado a continuación

Tengo un módulo llamado myApp como abajo

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

Tengo otro módulo llamado someApp como abajo

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

Tengo un Live Plunker para tu demo here

Answer 2

Tengo este repositorio de JStaticLoader , para facilitar la carga de archivos estáticos cuando los necesito. Sin embargo, no está angularizado, pero aún puedes usarlo en tu aplicación como una directive , puedes llamarlo directamente desde tu controller o incluso en $rootScope para cargar los js deseados.

JStaticLoader usa js puros y no requiere dependencias. Utiliza XMLHttpRequest para cargar los archivos estáticos.

Como ejemplo, use en su app.js (en $routeChangeStart o $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);
});
}
});
}]);

En el ejemplo anterior, obtengo un archivo js utilizando xhr y lo adjunto como una script de script en mi document una vez que está terminado. El script se cargará desde la memoria caché de su navegador.

Answer 3

Hablando estrictamente de la webpack -

El paquete web es solo un paquete de módulos y no un cargador de javascript. Ya que empaqueta archivos solo desde el almacenamiento local y no carga los archivos desde la web (excepto sus propios trozos). Aunque se pueden incluir otros módulos en el paquete web, lo que puede hacer. el mismo proceso

Mostraré solo algunos de los módulos que puede probar, ya que hay muchos de ellos definidos en la web.

Por lo tanto, una mejor manera de cargar de forma lenta el cdn de otro dominio sería usar el cargador de javascript - script.js

Se puede cargar de la siguiente manera:

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

Esto es posible porque el cargador de scripts solo evalúa el javascript en el contexto global.

Referencias here

Con respecto al tema de la carga perezosa de la cdn en la aplicación angular

La siguiente biblioteca Lab JS está hecha específicamente para este propósito. Se vuelve muy simple cargar y desbloquear el javascript usando esta biblioteca.

Aquí hay un ejemplo para demostrar

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

O

Puedes usar el require.js

Aquí hay un ejemplo para cargar el jQuery.

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

También debe considerar el siguiente párrafo de this artículo.

Cargar scripts de terceros asíncronos es clave para tener páginas web de alto rendimiento, pero esos scripts aún bloquean la carga. Tómese el tiempo para analizar sus datos de rendimiento web y comprenda si y cómo esos códigos / widgets / anuncios / códigos de seguimiento no tan importantes afectan los tiempos de carga de la página.