AngularJS-使用LazyLoad动态加载脚本文件-Webpack

现在在我的

index.html

页面中，我有两个CDN文件的链接，一个是JS文件，另一个是CSS文件

i、 e。 在我的身体底部

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

在头上

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

但现在我的主页上不需要它们，只需要一条特定的路线。因此，我正在研究如何在路由受到影响时（即，

/profile

之后）延迟加载这些CDN资源

这些不是通过bower或npm安装的，而是通过CDN url（例如jquery）加载的。如何在Angular 1和Webpack中基于路由延迟加载这些文件？

我有这个repo，以便在需要静态文件时轻松加载它们。虽然它没有角度化，但您仍然可以在应用程序中将其作为

指令使用，从
控制器直接调用它，甚至在
$rootScope
中加载所需的
js

JStaticLoader
使用纯js，不需要依赖项。它使用
XMLHttpRequest
加载静态文件

例如，在
app.js
中使用（在
$routeChangeStart
或
$stateChangeStart
上）

myApp
.run（['$rootScope'，'$http'，函数（$rootScope，$http）{
var scriptExists=函数（scriptId）{
if（document.getElementById（scriptId））{
返回true；
}
返回false；
};
var addLazyScript=函数（scriptId，url）{
如果（scriptExists（scriptId））返回；
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”，函数（e，当前）{
如果（current.controller=='MainCtrl'）{
var pathURL=[”https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.js"],
scriptId='lazyScript1'；
如果（scriptExists（scriptId））返回；
JStaticLoader（路径URL，{files:['js']}，函数（VAL，totalTime）{
/*成功*/
对于（变量i=0；i

在上面的示例中，我使用xhr获得了一个
js
文件，完成后将其作为
脚本添加到我的
文档中。然后将从浏览器的缓存中加载脚本。
在这里。。可以使用oclazyload。看看下面的代码。链接到下面的一个plunker

我有一个名为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");
        });

})();

我为您的演示提供了一个现场插件
严格地说是关于网页-

Webpack只是一个模块绑定器，而不是javascript加载器。因为它只从本地存储打包文件，不从web加载文件（除了它自己的块）。尽管其他模块可能包含在Webpack中，这可能会执行相同的过程。

我将只演示一些您可以尝试的模块，因为在web上定义了许多这样的模块

因此，从另一个域延迟加载cdn的更好方法是使用javascript加载程序-

可通过以下方式加载：

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

参考资料

关于延迟加载cdn到angular app的问题

以下库是专门为此目的而创建的。
使用此库加载和bloack javascript变得非常简单

下面是一个要演示的示例

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

你也应该从文章中考虑下面的段落。

异步加载第三方脚本是拥有高性能网页的关键，但这些脚本仍然阻止onload。花点时间分析您的web性能数据，了解那些不太重要的内容/小部件/广告/跟踪代码是否以及如何影响页面加载时间

通过一个特定的路线，它指的是什么？角度有路线，即/剖面。配置文件有单独的模块、控制器、视图等。我只想在用户导航到特定路径时加载上述库。$ocLazyLoad效果很好$ocLazyLoad示例应用程序XMLHttpRequest不是外部库。。事实上，它是内置的。你自己实现它，是指像。。。在不使用XMLHttpRequest的情况下实现ajax？很抱歉直言不讳，但是。。多么糟糕的主意@我不是说XHR是外部库。。但是，
JStaticLoader
是。。。。。我一定是被这句话误导了：“它使用XMLHttpRequest来加载它们。所以，如果您不想使用外部库来加载它们，您可以自己实现。”起初（实际上，很多人后来也读过），在没有上下文的情况下，这完全意味着XMLHttpRequest是一个外部库，如果你不想使用这些，你应该实现你自己的。也许只是删除关于XHR的部分，只说JStaticLoader是，如果你想避免外部库，你应该自己实现它。想想看，这意味着你也可以完全删除它，因为重点是提供答案，而不是告诉op他们可以自己实现它……）
<script src="LAB.js"></script>
  <script>
    $LAB
     .script("/local/init.js").wait(function(){
       waitfunction();
     });
  <script>

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