web-dev-qa-db-ja.com

複数の場所からスクリプトバンドルを作成する

アプリがオフラインであると仮定しましょう。つまり、サードパーティのCDNを使用できないため、独自のCDNを作成しています。すべてのベンダースクリプトを別の（親）Webアプリでホストしてから、他のいくつかのMVCアプリのバンドルに含めたいと思います。

例えば.

  • http://localhost/parentWeb/Scripts/jquery.js
  • http://localhost/parentWeb/Scripts/jquery-ui.js
  • http://localhost/parentWeb/Scripts/globalize.js

次の場所にあるASP.NETMVCアプリのWebサイトに含めたいと思います：http://localhost/parentWeb/childWeb

つまり、次のようなことを行います。

bundles.UseCdn = true;
bundles.Add(
    new ScriptBundle(
        "~/bundles/VendorScripts",
        "http://localhost/parentWeb/Scripts/jquery.js",
        "http://localhost/parentWeb/Scripts/jquery-ui.js",
        "http://localhost/parentWeb/Scripts/globalize.js"));

...もちろん、現在は不可能です。良い回避策はありますか？

c#asp.netasp.net-mvcasp.net-mvc-4bundling-and-minification
11
Грозный

外部リソースをバンドルすることはできません。あなたがそれについて考えるならば、あなたができない理由は理にかなっています。バンドラーが実際にリソースをダウンロードしてファイルシステムに保存してから使用する必要があります。もちろん、外部リソースに到達できない場合は、何らかのフォールバックを使用してすべて非同期で実行します。そして、最初にリソースをフェッチせずにlastmodをチェックできない（したがって、実際に再バンドルする必要があるかどうかを知る）ことができないため、すべてのページのロードでこれを行う必要があります。

CDNリソースを使用する場合、バンドラーはURLをページに直接出力するだけです。変更はありません。それでも、1）CDNの目的を損なうため、複数のCDNリソースをバンドルすることは意味がなく、2）バンドルはこれにのみ存在するため、その1つのURLの「バンドル」のみを作成できます。 CDNリソースが利用できない場合にフォールバックを提供するシナリオ。それ以外の場合は、ページにハードコーディングするだけで、バンドルの設定についてまったく心配する必要はありません。

14
Chris Pratt

これは古いトピックですが、CDNリソースをバンドルする実際の方法を探してここに来ました。 @ Chris Pratt の答えから、それは不可能だと理解しました。

不思議に思うなら、私は既存のプロジェクトを GoogleのWebパフォーマンスのベストプラクティス に従って最適化することに取り組んでいます。これは、複数のスクリプトタグがある場合はスコアが低く、すべてのスクリプトがバンドルされている場合はスコアが高くなります。単一のスクリプト参照。

すべてのCDNスクリプトリソースとローカルリソースを順番にバンドルする方法が必要でした。私はこれに取り組みました github repo 、それは私の問題を解決しました。

これを使用して、バンドルのリストを使用してバンドルを構築します。各バンドルには、cdnリソースへの参照、保存先のローカルリソース、およびバンドルを縮小するかどうかを示すブール値が含まれます。

List<Bundle> jsBundles = new List<Bundle>();
jsBundles.Add(new Bundle("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js", @"~/jquery.min.js", Bundle.BundleType.JavaScript, false));
jsBundles.Add(new Bundle("https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js", @"~/jquery-ui.min.js", Bundle.BundleType.JavaScript, false));
jsBundles.Add(new Bundle(@"~/my-local-script.js", Bundle.BundleType.JavaScript, true));

ページに配置するには、

@jsBundles.Load();

これにより、リスト内のすべてのバンドルが処理され、過去24時間以内にダウンロードされなかったバンドルのコンテンツがダウンロードされます（24時間ごと、またはWebアプリケーションの再起動時に更新されます）。ダウンロードされたすべてのコンテンツは、ローカルファイル（指定されている場合）に配置されます。

すべてのコンテンツが結合されて最終結果になり、スクリプトタグ（またはCSSのリンクタグ）でページにスプールされます。

ロード関数は、最終的なスクリプト/ cssコンテンツのローカルファイルURLも受け入れます。指定すると、代わりにそのローカルファイルの相対パスへのsrcを持つタグが与えられます。例えば。

@jsBundles.Load("~/js/all-my-scripts.js");

上記のステートメントは次のようなものを返します。

<script src="~/js/all-my-scripts.js"></script>

Load関数の2番目のパラメーターが指定されている場合は、非同期属性をスクリプトタグに追加できます。

また、csscdnリソースでも機能します。例えば。

List<Bundle> cssBundles = new List<Bundle>();
cssBundles.Add(new Bundle("https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.css", @"~/jquery.ui.css", Bundle.BundleType.CSS, false));
cssBundles.Add(new Bundle(@"~/css/my-local-style.css", Bundle.BundleType.CSS, true));


@cssBundles.Load("~/css/all-my-styles.css");

これは、私のように、実際にCDNリソースをバンドルする方法を探してここに来た人々の利益のためです。

8
Ikechi Michael

CDNとは何の関係もない解決策を見つけました。基本的に、childWebがparentWebのサブディレクトリでホストされている場合、childWebアプリの次のバンドル構成は、parentWebからファイルを選択し、通常どおりにバンドルします。

bundles.Add(
    new ScriptBundle(
        "~/bundles/VendorScripts").Include(
        "~/../Scripts/jquery.js",
        "~/../Scripts/Scripts/jquery-ui.js",
        "~/../Scripts/globalize.js"));

重要なのは：~/../、ルートの場所から1レベル上に移動します。

5
Грозный

CDNリソースでScriptBundlesを使用するには、オーバーロードされたコンストラクターを使用する必要があります。残念ながら、ファイルごとに複数のScriptBundlesを指定する必要があります。

これが物事を説明する素晴らしいブログ投稿です： http://www.hanselman.com/blog/CDNsFailButYourScriptsDontHaveToFallbackFromCDNToLocalJQuery.aspx

そして、ここにコードスニペットがあります：

bundles.UseCdn = true;
var bundle = new ScriptBundle("~/bundles/bundleNameHere", "//cdn.Host.path/to/file");
// Path to the version of the file on your server (in case the CDN fails)
bundle.Include("~/../Scripts/path/to/file");
// JS expression to run, to test if CDN delivered the file or not
bundle.CdnFallbackExpression = "window.ValueYouExpectToBeTruthy";

bundles.Add(bundle);
2
Bryan Rayner

バンドルの目的は、WebアプリケーションがホストされているWebサーバーのトラフィックを減らすことです。バンドルを使用すると、スクリプトファイルは並行してロードされません。これは、ローカルファイルを使用しているときに必要です。

ただし、cdnの場合、ファイルはcdnサーバーから読み込まれるため、cdnのバンドルを作成する必要はありません。ローカルファイルのみのバンドルが必要です

0
Sumit Shitole