Question

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

即。在我身体的底部

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

并在头脑中

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

但是现在我们的主页上并不需要它们，只是在一条特定的路线上。所以我正在调查如何在路由被点击/profile时才能延迟加载这些CDN资源？

这些并非通过bower或npm安装，而只是通过CDN网址加载，例如jquery。如何在Angular 1和Webpack中根据路由延迟加载？

Answer 1

在这里，你可以使用 oclazyload 。看看下面的代码。链接器位于下方

我有一个名为 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 2

我有这个JStaticLoader repo，以便我在需要时轻松加载静态文件。尽管如此，它仍然没有发展，但你仍然可以在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附加。echo '<form align="center" onSubmit="return confirm("Are you sure?")" class = "delete" id="delete_form" name = "marker_list2" action="delete_marker.php" method="post">'; echo '<input type="submit" value="Delete" name="edit">'; echo '</form>';然后，该脚本将从浏览器的缓存中加载。

Answer 3

严格谈论Webpack -

Webpack只是一个模块捆绑器而不是javascript loader。因为它只从本地存储打包文件，并且不会从Web加载文件（除了它自己的块）。虽然其他模块可能被包含在webpack中，可以执行相同的过程。

我将仅演示您可以尝试的一些模块，因为网上有很多这样的模块。

因此，从另一个域延迟加载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

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

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

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

3 个答案: