web-dev-qa-db-ja.com

AngularJS-LazyLoad-Webpackを使用したスクリプトファイルの動的ロード

今私のindex.htmlページ2つのCDNファイルへのリンクがあります。1つはJSで、もう1つはCSSファイルです。

つまり、私の体の底に

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

そして頭の中で

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

しかし、今のところ、それらは私のホームページでは必要ありませんが、1つの特定のルートでのみ必要です。そのため、ルートがヒットしたときにこれらのCDNリソースを遅延ロードする方法を検討していました。つまり/profileそしてその時だけ？

これらはbowerやnpmを介してインストールされるのではなく、jqueryなどのCDNURLを介してロードされるだけです。どのようにAngular 1とWebpackで、ルートに基づいて遅延ロードできますか？

angularjswebpacklazy-loadingoclazyload
16
StevieB

ここに行きます..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");
        });

})();

私はあなたのデモ用のライブプランカーを持っています ここ

11
Aravind

Webpackについて厳密に話します-

Webpackは単なるモジュールバンドラーであり、javascriptローダーではありません。ローカルストレージからのみファイルをパッケージ化し、Webからファイルをロードしないため（独自のチャンクを除く）、他のモジュールは同じプロセスを実行する可能性のあるWebpackに含まれている可能性があります。

Webにはそのようなものがたくさん定義されているので、試すことができるモジュールの一部のみを示します。

したがって、別のドメインから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を評価するだけだからです。

参照 ここ

cdnをangular appに遅延ロードする問題について

次のライブラリ 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 article。の次の段落も検討する必要があります。

サードパーティのスクリプトを非同期でロードすることは、高性能のWebページを作成するための鍵ですが、それらのスクリプトは依然としてオンロードをブロックします。時間をかけてWebパフォーマンスデータを分析し、それほど重要ではないコンテンツ/ウィジェット/広告/トラッキングコードがページの読み込み時間に影響を与えるかどうか、またどのように影響するかを理解してください。

2
Pritish Vaidya

私はこれを持っています 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として追加します。スクリプトはブラウザのキャッシュから読み込まれます。

2
vadi taslim