AngularJS - Carregamento dinâmico de arquivos de script usando o LazyLoad-Webpack - angularjs, webpack, carregamento lento, oclazyload

Agora mesmo no meu index.html Eu tenho links para dois arquivos CDN sendo um JS e o outro um arquivo CSS.

isto é no fundo do meu corpo

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

e na cabeça

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

Mas agora eles não são necessários na minha página inicial, mas apenas em uma rota específica. Então, eu estava procurando como posso preguiçar carregar esses recursos da CDN quando essas rotas são atingidas, ou seja, /profile e só então?

Estes não são instalados via bower ou npm, mas apenas carregados via url CDN, por exemplo, jquery. Como em Angular 1 e Webpack posso preguiçoso carregar isso com base em uma rota?

Respostas:

11 para resposta № 1

Aqui vai você .. É possível usando oclazyload. Dê uma olhada no código abaixo. Um plunker ligado abaixo

Eu tenho um módulo chamado myApp como abaixo

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

});

Eu tenho outro módulo chamado someApp como abaixo

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

})();

Eu tenho um Live Plunker para sua demonstração Aqui

---

2 para resposta № 2

eu tenho isto JStaticLoader repo, para facilitar o carregamento de arquivos estáticos sempre que eu precisar deles. No entanto, não é angularizado, mas você ainda pode usá-lo em seu aplicativo como um directive, chame-o direto do seu controller ou mesmo no $rootScope para carregar o seu desejado js.

JStaticLoader usa js puro e não requer dependências. Usa XMLHttpRequest para carregar os arquivos estáticos.

Como exemplo, use em seu app.js (em $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);
});
}
});
}]);

Na amostra acima, recebo um js arquivo usando xhr, e anexá-lo como um script no meu document assim que terminar, o script será carregado a partir do cache do seu navegador.

---

2 para resposta № 3

Estritamente falando sobre o Webpack -

Webpack é apenas um bundler módulo e não umjavascript loader.Desde empacotar arquivos somente do armazenamento local e não carrega os arquivos da web (exceto seus próprios pedaços) .Embora outros módulos podem ser incluídos no webpack que pode fazer o mesmo processo.

Vou demonstrar apenas alguns dos módulos que você pode tentar, pois existem muitos desses definidos na web.

Portanto, uma maneira melhor de carregar o cdn do outro domínio seria usando o carregador de javascript - script.js

Pode ser carregado da seguinte maneira -

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

Isso é possível porque o carregador de script apenas avalia o javascript no contexto global.

Referências Aqui

Sobre a questão do carregamento lento do cdn no aplicativo angular

A seguinte biblioteca Laboratório JS é feito especificamente para este propósito. Torna-se muito simples carregar e bloack o javascript usando esta biblioteca.

Aqui está um exemplo para demonstrar

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

OU

Você pode usar o require.js

Aqui está um exemplo para carregar o jquery

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

Você também deve considerar o seguinte parágrafo de esta artigo.

Carregar scripts de terceiros assíncronos é a chave parater páginas da web de alto desempenho, mas esses scripts ainda bloqueiam o onload. Reserve um tempo para analisar seus dados de desempenho da Web e entender se e como esses códigos de conteúdo / widgets / anúncios / rastreamento não tão importantes afetam os tempos de carregamento da página.

---