🐥note.

小鳥とMicrosoft <3 なエンジニアの技術Blog📚

Blazorチョット(だけ快適に開発)デキルようになる(かもしれない)小技

本エントリはBlazor Advent Calender 2019の16日目の記事です

Blazorの開発を行う上でチョット(だけ快適に開発)デキルようになる(かもしれない)小技を紹介します。

Linkの無効化でClient side Blazorのビルド時間をチョット高速化する

Client side Blazorで大きめなプロジェクト・ライブラリを使用している場合、アセンブリのリンクを無効化することでビルドがチョット早くなる小技です。

参考元はMicrosoft Docs

docs.microsoft.com

.csprojに以下の設定を追加するだけ。

<PropertyGroup>
    <BlazorLinkOnBuild>false</BlazorLinkOnBuild>
</PropertyGroup>

Releaseビルドする際はBlazorLinkOnBuildをtrueにしたいのでConditionによる設定を切り替えた方がよいでしょう。

<PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
    <BlazorLinkOnBuild>false</BlazorLinkOnBuild>
</PropertyGroup>

私の環境ではdootnet new blazorwasmで作成したテンプレートの初回ビルドが6秒から2秒に短縮されました。
※追記:リビルドしてるだけでした😢

チョットしたLatency計測でUXへの影響調査

JavaScript Interopを使用して簡易的にネットワーク待機時間を測定する方法がMicrosoft Docsに記載されています。

docs.microsoft.com

上記コードをComponent化しましょう。
今回はLatency.razorという名前にし、500[ms]毎にLatencyを表示するようにしています。

@inject IJSRuntime JS

@if (latency is null)
{
    <span>Calculating...</span>
}
else
{
    <span>@(latency.Value.TotalMilliseconds)ms</span>
}

@code
{
    private DateTime startTime;
    private TimeSpan? latency;

    protected override void OnInitialized()
    {
        Task.Run( async () => {
            while(true)
            {
                startTime = DateTime.UtcNow;
                var _ = await JS.InvokeAsync<string>("toString");
                latency = DateTime.UtcNow - startTime;
                await InvokeAsync(StateHasChanged);
                await Task.Delay(500);
            };
        });
    }
}

あとは計測したいページやNavMenu.razorなど任意の場所に<Latency />を埋め込むだけです。

f:id:piyo_esq:20191214115448g:plain
Latency計測

※毎秒更新ではなくOnInitializedあたりで何らかの処理をやってる場合、画面開いた際に1回Latency表示するくらいでも良いかもしれませんね。

LiveReloadでビルド後の画面の確認をチョット高速化

Westwind.AspnetCore.LiveReloadを使用しBlazorにLiveReloadを導入します。

github.com

通常の開発では以下のような流れで開発していると思います。

Coding -> ファイル保存 -> 手動でBuild開始 -> Build完了まで待機 -> 手動でブラウザを更新 -> 画面を確認

dotnet watch runWestwind.AspnetCore.LiveReloadを組み合わせると以下の流れになります。

Coding -> ファイル保存 -> Build完了まで待機 -> 画面で確認

dotnet watch runがファイル保存をトリガーに自動的にBuildしてくれて、 前途ライブラリがブラウザの更新をよしなにやってくれる感じですね。

導入前と導入後でブラウザの挙動をキャプチャしてみました。

LiveReload導入前

f:id:piyo_esq:20191214114434g:plain
LiveReload導入前

LiveReload導入後

f:id:piyo_esq:20191214114648g:plain
LiveReload導入後

Buildが完了したら自動的に画面が更新されてHello Worldの文字が描画されていることが分かると思います。

CSSなどの静的ファイルの変更もキャプチャーしてくれるので楽ちんです。

f:id:piyo_esq:20191214114814g:plain
LiveReload導入後 CSSファイルの変更がリアルタイムに反映される

導入手順

.NET Core 3.1 LTSで使用する場合の手順は以下の通りです。
Server side Blazorのプロジェクトを作成します。

dotnet new blazorserver -o SampleBlazor
cd SampleBlazor
dotnet add package Westwind.AspnetCore.LiveReload

Startup.csを編集します。
app.UseLiveReload();app.UseStaticFiles();の前に実行する必要がある点に注意です。
ASP.NET Core 3.0の場合AddRazorRuntimeCompilationも必要っぽいですね。

+ using Westwind.AspNetCore.LiveReload;

// 途中省略

public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();
    services.AddServerSideBlazor();
    services.AddSingleton<WeatherForecastService>();
+  services.AddLiveReload();
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // 途中省略

    app.UseHttpsRedirection();
    
+ app.UseLiveReload();

    // 途中省略

}

下記コマンドで起動します。

dotnet watch run

適当な.razorファイルや.cssを編集しファイルの保存をしてみてください。 自動的にビルドが走り、自動的に画面が更新されるはずです。

なおdotnet watchについてはMicrosoft Docや私の過去のエントリをご参照ください。

docs.microsoft.com

blog.piyosi.com

おわり

これでBlazorチョット(だけ快適に開発)デキルようになりましたね✨