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

Question

现在在我的 index.html 页面上有两个 CDN 文件的链接，一个是 JS，另一个是 CSS 文件。

即在我的 body

底部

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

我有这个 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);
            });
        }
    });
}]);

在上面的示例中，我使用 xhr 获得了一个 js 文件，并在完成后将其作为 script 添加到我的 document 中。然后将从浏览器的缓存中加载脚本。

Answer 2

给你.. 使用 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");
        });

})();

我有一个 Live Plunker 供您演示 here

Answer 3

严格来说 Webpack -

Webpack is just a module bundler and not a javascript loader.Since it packages files only from the local storage and doesn't load the files from the web(except its own chunks).ALthough other modules may be included into the webpack which may do the same process.

我将只演示一些您可以尝试的模块，因为网络上定义了很多这样的模块。

因此，从另一个域延迟加载 cdn 的更好方法是使用 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
});

这是可能的，因为 script-loader 只是在全局上下文中评估 javascript。

参考文献here

关于angular应用cdn延迟加载的问题

以下库 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 文章中的以下段落。

Loading third party scripts async is key for having high performance web pages, but those scripts still block onload. Take the time to analyze your web performance data and understand if and how those not-so-important content/widgets/ads/tracking codes impact page load times.

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

AngularJS- Dynamic Loading of script files using LazyLoad- Webpack

angularjs

webpack

lazy-loading

oclazyload