Blazor Serverプロジェクトで、環境（Development/Production）に応じて読み込む JavaScript ファイルを切り替える

はじめに

Blazor Server（または .NET 8 以降の Blazor Web App）で、環境（Development/Production）に応じて読み込む JavaScript ファイルを切り替える際のメモ

Blazor Serverプロジェクトで、開発を行っていますが、javascriptファイルが非常に大きいので、本番環境ではできるだけ小さいファイルを読み込むよう
環境に応じて応じて読み込む JavaScript ファイルを切り替える方法を検証しました。

Environment コンポーネントによる分岐

従来の _Host.cshtml や _Layout.cshtml は廃止（または標準テンプレートから除外）され、App.razor がその役割を統合して担うようになりました。
.NET 8 の App.razor で環境ごとの切り替えを行う場合、「Tag Helper（タグヘルパー）」を使用するための準備が少しだけ必要になります。

■重要なポイント
・@addTagHelper の追加:
App.razor の末尾（または先頭）に @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers を記述してください。これを忘れると、タグがただの「不明なHTMLタグ」として扱われ、中身が常に表示されてしまいます。

・対照的な環境指定
include=”Development” と exclude=”Development” をセットで使うのが最も安全です。これにより、開発環境かそれ以外（本番・ステージング等）かで確実に二択にできます。

・キャッシュ対策（クエリパラメータの付与）

本番環境で JS を更新した際にブラウザキャッシュで古いファイルが読み込まれるのを防ぐため、本番環境側には ASP.NET Core の asp-append-version 機能を利用することをお勧めします。

<body>
    @* 環境に応じたJSの読み込み *@
    <environment include="Development">
        <script src="scripts/devextreme-24.1/js/dx.all.debug.js" asp-append-version="true"></script>
    </environment>
    
    <environment exclude="Development">
        <script src="scripts/devextreme-24.1/js/dx.all.js" asp-append-version="true"></script>
    </environment>

    <script src="_framework/blazor.web.js"></script>
</body>


@* タグヘルパーを有効にするために必要 *@
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<body>

@* 環境に応じたJSの読み込み *@

</environment>

</environment>

</body>

@* タグヘルパーを有効にするために必要 *@

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

独自に環境変数（IWebHostEnvironment）を利用する場合

.NET 8 以降のプロジェクトテンプレートを使用している場合、App.razor は静的な HTML 構造を定義しています。このファイル内で Environment タグヘルパーを使用するには、通常の設定で動作しますが、もし独自に環境変数を確認したい場合は IWebHostEnvironment を注入して制御することも可能です。

@inject IWebHostEnvironment Env
@if (Env.IsDevelopment())
{
    <script src="scripts/devextreme-24.1/js/dx.all.debug.js"></script>
}
else
{
    <script src="scripts/devextreme-24.1/js/dx.all.js"></script>
}