ASP.NET Core'da gecikmeli yük derlemeleri Blazor WebAssembly

Not

Bu, bu makalenin en son sürümü değildir. Geçerli sürüm için bu makalenin .NET 10 sürümüne bakın.

Uyarı

ASP.NET Core'un bu sürümü artık desteklenmiyor. Daha fazla bilgi için bkz . .NET ve .NET Core Destek İlkesi. Geçerli sürüm için bu makalenin .NET 9 sürümüne bakın.

Blazor WebAssemblyuygulama başlatma performansı, derlemeler gerekli olana kadar geliştirici tarafından oluşturulan uygulama derlemelerinin yüklenmesi beklenerek geliştirilebilir ve bu da gecikmeli yükleme olarak adlandırılır.

Bu makalenin ilk bölümleri uygulama yapılandırmasını kapsar. Çalışan bir tanıtım için bu makalenin sonundaki Tam örnek bölümüne bakın.

Bu makale yalnızca uygulamalar için Blazor WebAssembly geçerlidir. Sunucu tarafından işlenen uygulamalar derlemeleri istemciye indirmediğinden derlemenin gecikmeli yüklenmesi sunucu tarafı uygulamalarına fayda sağlamaz.

Tembel yükleme, yayımlama sırasında kesilebilen ve uygulama yüklendiğinde istemcide kullanılamayan çekirdek çalışma zamanı derlemeleri için kullanılmamalıdır.

Derleme dosyaları için dosya uzantısı yer tutucusu (`{FILE EXTENSION}`)

Assembly dosyaları, .NET derlemeleri için Webcil paketleme formatını ve .wasm dosya uzantısını kullanır.

Makale boyunca {FILE EXTENSION} yerine "wasm" ifadesi kullanılır.

Derleme dosyaları, bir .dll dosya uzantısına sahip Dinamik Bağlantı Kitaplıklarını (DLL' ler) temel alır.

Makale boyunca {FILE EXTENSION} yerine "dll" ifadesi kullanılır.

Proje dosyası yapılandırması

Uygulamanın proje dosyasında (.csproj) gecikmeli yükleme için derlemeleri BlazorWebAssemblyLazyLoad öğesiyle işaretleyin. Derleme adını dosya uzantısı ile birlikte kullanın. Çerçeve, Blazor derlemenin uygulama başlatıldığında yüklenmesini engeller.

<ItemGroup>
  <BlazorWebAssemblyLazyLoad Include="{ASSEMBLY NAME}.{FILE EXTENSION}" />
</ItemGroup>

{ASSEMBLY NAME} yer tutucu derlemenin adıdır, {FILE EXTENSION} yer tutucu dosya uzantısıdır. Dosya uzantısı gereklidir.

Her derleme için bir BlazorWebAssemblyLazyLoad öğe ekleyin. Bir derlemenin bağımlılıkları varsa, her bağımlılık için bir BlazorWebAssemblyLazyLoad girdi ekleyin.

`Router` bileşen yapılandırması

Çerçeve, Blazor istemci tarafı Blazor WebAssembly uygulamalarındaki LazyAssemblyLoaderyavaş yükleme derlemeleri için bir tekil hizmeti otomatik olarak kaydeder. LazyAssemblyLoader.LoadAssembliesAsync yöntemi:

JS Interop kullanarak derlemeleri bir ağ çağrısı ile getirir.
Derlemeleri tarayıcıda WebAssembly üzerinde yürütülen çalışma zamanına yükler.

Not

Barındırılan çözümler için rehberlik, barındırılan çözüm bölümündeki Gecikmeli yük derlemeleri kısmında ele alınmıştır.

Blazor'nin Router bileşeni yönlendirilebilir bileşenleri arayan Blazor derlemeleri ayarlar ve ayrıca kullanıcının gezindiği yol için bileşenin işlenmesinden sorumludur. Bileşenin Router OnNavigateAsync yöntemi , kullanıcının istediği uç noktalar için doğru derlemeleri yüklemek üzere gecikmeli yükleme ile birlikte kullanılır.

OnNavigateAsync içerisinde LazyAssemblyLoader ile yüklenecek derlemeleri belirlemek için mantık uygulanır. Mantığı yapılandırma seçenekleri şunlardır:

OnNavigateAsync yönteminde koşullu denetimler.
Yolları bileşene eklenen veya bileşenin kodu içinde uygulanan derleme adlarına eşleyen bir arama tablosu.

Aşağıdaki örnekte:

için Microsoft.AspNetCore.Components.WebAssembly.Services ad alanı belirtilir.
Hizmet LazyAssemblyLoader enjekte edilir (AssemblyLoader).
Yer tutucu {PATH}, derleme listesinin yüklenmesi gereken yola işaret eder. Örnek, tek bir derleme kümesini yükleyen tek bir yol için koşullu denetim kullanır.
"{LIST OF ASSEMBLIES} tutucu, dosya uzantıları da dahil olmak üzere birleştirme dosya adı dizelerinin virgülle ayrılmış bir şekilde düzenlenmiş listesidir (örneğin, "Assembly1.{FILE EXTENSION}", "Assembly2.{FILE EXTENSION}")."

App.razor:

@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.WebAssembly.Services
@using Microsoft.Extensions.Logging
@inject LazyAssemblyLoader AssemblyLoader
@inject ILogger<App> Logger

<Router AppAssembly="typeof(App).Assembly" 
    OnNavigateAsync="OnNavigateAsync">
    ...
</Router>

@code {
    private async Task OnNavigateAsync(NavigationContext args)
    {
        try
           {
               if (args.Path == "{PATH}")
               {
                   var assemblies = await AssemblyLoader.LoadAssembliesAsync(
                       [ {LIST OF ASSEMBLIES} ]);
               }
           }
           catch (Exception ex)
           {
               Logger.LogError("Error: {Message}", ex.Message);
           }
    }
}

@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.WebAssembly.Services
@using Microsoft.Extensions.Logging
@inject LazyAssemblyLoader AssemblyLoader
@inject ILogger<App> Logger

<Router AppAssembly="typeof(App).Assembly" 
    OnNavigateAsync="OnNavigateAsync">
    ...
</Router>

@code {
    private async Task OnNavigateAsync(NavigationContext args)
    {
        try
           {
               if (args.Path == "{PATH}")
               {
                   var assemblies = await AssemblyLoader.LoadAssembliesAsync(
                       new[] { {LIST OF ASSEMBLIES} });
               }
           }
           catch (Exception ex)
           {
               Logger.LogError("Error: {Message}", ex.Message);
           }
    }
}

@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.WebAssembly.Services
@using Microsoft.Extensions.Logging
@inject LazyAssemblyLoader AssemblyLoader
@inject ILogger<App> Logger

<Router AppAssembly="typeof(Program).Assembly" 
    OnNavigateAsync="OnNavigateAsync">
    ...
</Router>

@code {
    private async Task OnNavigateAsync(NavigationContext args)
    {
        try
           {
               if (args.Path == "{PATH}")
               {
                   var assemblies = await AssemblyLoader.LoadAssembliesAsync(
                       new[] { {LIST OF ASSEMBLIES} });
               }
           }
           catch (Exception ex)
           {
               Logger.LogError("Error: {Message}", ex.Message);
           }
    }
}

Not

Yukarıdaki örnekte bileşenin Router işaretlemesinin Razor (... ) içeriği gösterilmiyor. Kodun tamamını içeren bir tanıtım için bu makalenin Tam örnek bölümüne bakın.

Not

.NET 5.0.1 sürümünün çıkışı ve ek 5.x sürümleri için, Router bileşeni PreferExactMatches parametresini @true olarak ayarlayacaktır. Daha fazla bilgi için bkz. ASP.NET Core 3.1'den .NET 5'e geçiş.

Yönlendirilebilir bileşenler içeren derlemeler

Derlemeler listesi yönlendirilebilir bileşenler içerdiğinde, belirli bir yolun derleme listesi bileşenin Router koleksiyonuna AdditionalAssemblies geçirilir.

Aşağıdaki örnekte:

Liste<Assembly>, derleme listesini lazyLoadedAssemblies öğesine AdditionalAssemblies geçirir. Çerçeve, derlemelerde yollar arar ve yeni yollar bulunursa yol koleksiyonunu güncelleştirir. Assembly türüne erişmek için, System.Reflection ad alanı App.razor dosyasının en üstüne eklenir.
Yer tutucu {PATH}, derleme listesinin yüklenmesi gereken yola işaret eder. Örnek, tek bir derleme kümesini yükleyen tek bir yol için koşullu denetim kullanır.
"{LIST OF ASSEMBLIES} tutucu, dosya uzantıları da dahil olmak üzere birleştirme dosya adı dizelerinin virgülle ayrılmış bir şekilde düzenlenmiş listesidir (örneğin, "Assembly1.{FILE EXTENSION}", "Assembly2.{FILE EXTENSION}")."

App.razor:

@using System.Reflection
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.WebAssembly.Services
@using Microsoft.Extensions.Logging
@inject ILogger<App> Logger
@inject LazyAssemblyLoader AssemblyLoader

<Router AppAssembly="typeof(App).Assembly" 
    AdditionalAssemblies="lazyLoadedAssemblies" 
    OnNavigateAsync="OnNavigateAsync">
    ...
</Router>

@code {
    private List<Assembly> lazyLoadedAssemblies = [];

    private async Task OnNavigateAsync(NavigationContext args)
    {
        try
        {
            if (args.Path == "{PATH}")
            {
                var assemblies = await AssemblyLoader.LoadAssembliesAsync(
                    [ {LIST OF ASSEMBLIES} ]);
                lazyLoadedAssemblies.AddRange(assemblies);
            }
        }
        catch (Exception ex)
        {
            Logger.LogError("Error: {Message}", ex.Message);
        }
    }
}

@using System.Reflection
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.WebAssembly.Services
@using Microsoft.Extensions.Logging
@inject ILogger<App> Logger
@inject LazyAssemblyLoader AssemblyLoader

<Router AppAssembly="typeof(App).Assembly" 
    AdditionalAssemblies="lazyLoadedAssemblies" 
    OnNavigateAsync="OnNavigateAsync">
    ...
</Router>

@code {
    private List<Assembly> lazyLoadedAssemblies = new();

    private async Task OnNavigateAsync(NavigationContext args)
    {
        try
        {
            if (args.Path == "{PATH}")
            {
                var assemblies = await AssemblyLoader.LoadAssembliesAsync(
                    new[] { {LIST OF ASSEMBLIES} });
                lazyLoadedAssemblies.AddRange(assemblies);
            }
        }
        catch (Exception ex)
        {
            Logger.LogError("Error: {Message}", ex.Message);
        }
    }
}

@using System.Reflection
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.WebAssembly.Services
@using Microsoft.Extensions.Logging
@inject ILogger<App> Logger
@inject LazyAssemblyLoader AssemblyLoader

<Router AppAssembly="typeof(Program).Assembly" 
    AdditionalAssemblies="lazyLoadedAssemblies" 
    OnNavigateAsync="OnNavigateAsync">
    ...
</Router>

@code {
    private List<Assembly> lazyLoadedAssemblies = new List<Assembly>();

    private async Task OnNavigateAsync(NavigationContext args)
    {
        try
           {
               if (args.Path == "{PATH}")
               {
                   var assemblies = await AssemblyLoader.LoadAssembliesAsync(
                       new[] { {LIST OF ASSEMBLIES} });
                   lazyLoadedAssemblies.AddRange(assemblies);
               }
           }
           catch (Exception ex)
           {
               Logger.LogError("Error: {Message}", ex.Message);
           }
    }
}

Not

Yukarıdaki örnekte bileşenin Router işaretlemesinin Razor (... ) içeriği gösterilmiyor. Kodun tamamını içeren bir tanıtım için bu makalenin Tam örnek bölümüne bakın.

Not

Daha fazla bilgi için bkz . ASP.NET Temel Blazor yönlendirme ve gezinti.

İçerikle `<Navigating>` kullanıcı etkileşimi

Birkaç saniye sürebilen derlemeler yüklenirken, Router bileşen kullanıcıya yönlendiricinin Navigating özelliğiyle bir sayfa geçişi gerçekleştiğini gösterebilir.

Daha fazla bilgi için bkz . ASP.NET Temel Blazor yönlendirme ve gezinti.

`OnNavigateAsync` uygulamasında iptalleri işleme

Geri çağırma NavigationContext 'e geçirilen OnNavigateAsync nesnesi, yeni bir navigasyon olayı meydana geldiğinde ayarlanan bir CancellationToken içerir. OnNavigateAsync iptal belirteci ayarlandığında, eski bir gezinimde OnNavigateAsync callback'in çalıştırılmaya devam edilmesini önlemek için bir istisna fırlatmalıdır.

Daha fazla bilgi için bkz . ASP.NET Temel Blazor yönlendirme ve gezinti.

`OnNavigateAsync` etkinlikler ve yeniden adlandırılmış derleme dosyaları

Kaynak yükleyici, önyükleme bildirimi dosyasında tanımlanan derleme adlarına dayanır. Derlemeler yeniden adlandırılırsa, geri çağrı sırasında kullanılan derleme adları ve önyükleme manifestosundaki derleme adları eşitlenmemiş olur.

Bunu düzeltmek için:

Uygulamanın Production ortamında çalışıp çalışmadığını kontrol edin ve hangi derleme adlarının kullanılacağını belirleyin.
Yeniden adlandırılmış olan derleme adlarını ayrı bir dosyada saklayın ve bu dosyadan okuyarak LazyAssemblyLoader hizmeti ve OnNavigateAsync geri çağırma için hangi derleme adını kullanacağınızı belirleyin.

Barındırılan Blazor WebAssembly çözümde gecikmeli yük derlemeleri

Çerçevenin gecikmeli yükleme uygulaması, barındırılan Blazor WebAssemblybir çözümde önyükleme ile gecikmeli yüklemeyi destekler. Prerendering sırasında, gecikmeli yükleme için işaretlenenler de dahil olmak üzere tüm derlemelerin yüklendiği varsayılır. LazyAssemblyLoader hizmetini Server projeye el ile kaydedin.

Program.cs Server dosyasının en üstüne Microsoft.AspNetCore.Components.WebAssembly.Services ad alanını ekleyin:

using Microsoft.AspNetCore.Components.WebAssembly.Services;

Program.cs projesinde Server hizmetini kaydedin:

builder.Services.AddScoped<LazyAssemblyLoader>();

Startup.cs Server dosyasının en üstüne Microsoft.AspNetCore.Components.WebAssembly.Services ad alanını ekleyin:

using Microsoft.AspNetCore.Components.WebAssembly.Services;

Startup.ConfigureServices hizmetini Startup.cs projesinin (Server) içine kaydedin.

services.AddScoped<LazyAssemblyLoader>();

Tam örnek

Bu bölümdeki tanıtım:

Robot kontrolleri montajı oluşturur (GrantImaharaRobotControls.{FILE EXTENSION}) bir sınıf kütüphanesi (RCL) olarak, bir bileşen içeren (Razor belirli bir rota şablonu ile ).
Kullanıcı tarafından Robot URL'si istendiğinde RCL'nin derlemesini tembel yükleme şeklinde gerçekleştirerek /robot bileşenini işler.

Sınıf kitaplığının derlemesinin yavaş yüklenmesini göstermek için tek başına Blazor WebAssembly bir Razor uygulama oluşturun. Projeyi LazyLoadTestolarak adlandırın.

Çözüme bir ASP.NET Core sınıf kitaplığı projesi ekleyin:

Visual Studio: Çözüm Gezgini'nde çözüm dosyasına sağ tıklayın ve Ekle> seçin. Yeni proje türleri iletişim kutusundan "Sınıf Kitaplığı"nı seçin. Projeyi GrantImaharaRobotControlsolarak adlandırın. Destek sayfaları ve görünümleri onay kutusunu seçmeyin.
Visual Studio Code/.NET CLI: Komut isteminden dotnet new razorclasslib -o GrantImaharaRobotControls çalıştırın. seçeneği -o|--output bir klasör oluşturur ve projeyi GrantImaharaRobotControlsolarak adlandırmaktadır.

RCL'de bir HandGesture sınıf oluşturun, bu sınıfın içinde bir robota başparmak yukarı hareketi yaptırdığı varsayılan bir ThumbUp metot bulunsun. Yöntem, ekseni için bir bağımsız değişken olarak Left veya Right'i enum kabul eder. Yöntem, başarılı olduğunda true döndürür.

HandGesture.cs:

using Microsoft.Extensions.Logging;

namespace GrantImaharaRobotControls;

public static class HandGesture
{
    public static bool ThumbUp(Axis axis, ILogger logger)
    {
        logger.LogInformation("Thumb up gesture. Axis: {Axis}", axis);

        // Code to make robot perform gesture

        return true;
    }
}

public enum Axis { Left, Right }

using Microsoft.Extensions.Logging;

namespace GrantImaharaRobotControls
{
    public static class HandGesture
    {
        public static bool ThumbUp(Axis axis, ILogger logger)
        {
            logger.LogInformation("Thumb up gesture. Axis: {Axis}", axis);

            // Code to make robot perform gesture

            return true;
        }
    }

    public enum Axis { Left, Right }
}

Aşağıdaki bileşeni RCL projesinin köküne ekleyin. Bileşen, kullanıcının bir sol veya sağ el başparmak yukarı hareket isteği göndermesine izin verir.

Robot.razor:

@page "/robot"
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.Extensions.Logging
@inject ILogger<Robot> Logger

<h1>Robot</h1>

<EditForm FormName="RobotForm" Model="robotModel" OnValidSubmit="HandleValidSubmit">
    <InputRadioGroup @bind-Value="robotModel.AxisSelection">
        @foreach (var entry in Enum.GetValues<Axis>())
        {
            <InputRadio Value="entry" />
            <text>&nbsp;</text>@entry<br>
        }
    </InputRadioGroup>

    <button type="submit">Submit</button>
</EditForm>

<p>
    @message
</p>

@code {
    private RobotModel robotModel = new() { AxisSelection = Axis.Left };
    private string? message;

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        var result = HandGesture.ThumbUp(robotModel.AxisSelection, Logger);

        message = $"ThumbUp returned {result} at {DateTime.Now}.";
    }

    public class RobotModel
    {
        public Axis AxisSelection { get; set; }
    }
}

@page "/robot"
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.Extensions.Logging
@inject ILogger<Robot> Logger

<h1>Robot</h1>

<EditForm Model="robotModel" OnValidSubmit="HandleValidSubmit">
    <InputRadioGroup @bind-Value="robotModel.AxisSelection">
        @foreach (var entry in Enum.GetValues<Axis>())
        {
            <InputRadio Value="entry" />
            <text>&nbsp;</text>@entry<br>
        }
    </InputRadioGroup>

    <button type="submit">Submit</button>
</EditForm>

<p>
    @message
</p>

@code {
    private RobotModel robotModel = new() { AxisSelection = Axis.Left };
    private string? message;

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        var result = HandGesture.ThumbUp(robotModel.AxisSelection, Logger);

        message = $"ThumbUp returned {result} at {DateTime.Now}.";
    }

    public class RobotModel
    {
        public Axis AxisSelection { get; set; }
    }
}

@page "/robot"
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.Extensions.Logging
@inject ILogger<Robot> Logger

<h1>Robot</h1>

<EditForm Model="robotModel" OnValidSubmit="HandleValidSubmit">
    <InputRadioGroup @bind-Value="robotModel.AxisSelection">
        @foreach (var entry in (Axis[])Enum
            .GetValues(typeof(Axis)))
        {
            <InputRadio Value="entry" />
            <text>&nbsp;</text>@entry<br>
        }
    </InputRadioGroup>

    <button type="submit">Submit</button>
</EditForm>

<p>
    @message
</p>

@code {
    private RobotModel robotModel = new RobotModel() { AxisSelection = Axis.Left };
    private string message;

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        var result = HandGesture.ThumbUp(robotModel.AxisSelection, Logger);

        message = $"ThumbUp returned {result} at {DateTime.Now}.";
    }

    public class RobotModel
    {
        public Axis AxisSelection { get; set; }
    }
}

projesinde, RCL için bir proje başvurusu oluşturun:>

Visual Studio: LazyLoadTest projeye sağ tıklayın ve RCL için bir proje başvurusu eklemek üzere Ekle>Proje Başvurusu'nu seçin.
Visual Studio Code/.NET CLI: Projenin klasöründen bir komut kabuğunda dotnet add reference {PATH} çalıştırın. Yerleştirme simgesi {PATH}, RCL projesinin yoludur.

Uygulamanın proje dosyasında gecikmeli yükleme için RCL'nin derlemesini LazyLoadTest belirtin (.csproj):

<ItemGroup>
    <BlazorWebAssemblyLazyLoad Include="GrantImaharaRobotControls.{FILE EXTENSION}" />
</ItemGroup>

Aşağıdaki Router bileşen, kullanıcı GrantImaharaRobotControls.{FILE EXTENSION}'ye gittiğinde /robot derlemenin yüklenmesini gösterir. Uygulamanın varsayılan App bileşenini aşağıdaki App bileşenle değiştirin.

Sayfa geçişleri sırasında, kullanıcıya <Navigating> öğesi ile stili verilmiş bir ileti görüntülenir. Daha fazla bilgi için İçerikle <Navigating> kullanıcı etkileşimi bölümüne bakın.

Montaj AdditionalAssemblies'ye atanır ve bu durum yönlendiricinin Robot bileşenini bulduğu yönlendirilebilir bileşenler için montajı aramasına neden olur. Bileşenin Robot yolu, uygulamanın yol koleksiyonuna eklenir. Daha fazla bilgi için bu makalenin ASP.NET Temel Blazor yönlendirme ve gezinti makalesine ve yönlendirilebilir bileşenler içeren derlemeler bölümüne bakın.

App.razor:

@using System.Reflection
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.WebAssembly.Services
@using Microsoft.Extensions.Logging
@inject ILogger<App> Logger
@inject LazyAssemblyLoader AssemblyLoader

<Router AppAssembly="typeof(App).Assembly"
        AdditionalAssemblies="lazyLoadedAssemblies" 
        OnNavigateAsync="OnNavigateAsync">
    <Navigating>
        <div style="padding:20px;background-color:blue;color:white">
            <p>Loading the requested page&hellip;</p>
        </div>
    </Navigating>
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

@code {
    private List<Assembly> lazyLoadedAssemblies = [];
    private bool grantImaharaRobotControlsAssemblyLoaded;

    private async Task OnNavigateAsync(NavigationContext args)
    {
        try
        {
            if ((args.Path == "robot") && !grantImaharaRobotControlsAssemblyLoaded)
            {
                var assemblies = await AssemblyLoader.LoadAssembliesAsync(
                    [ "GrantImaharaRobotControls.{FILE EXTENSION}" ]);
                lazyLoadedAssemblies.AddRange(assemblies);
                grantImaharaRobotControlsAssemblyLoaded = true;
            }
        }
        catch (Exception ex)
        {
            Logger.LogError("Error: {Message}", ex.Message);
        }
    }
}

@using System.Reflection
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.WebAssembly.Services
@using Microsoft.Extensions.Logging
@inject ILogger<App> Logger
@inject LazyAssemblyLoader AssemblyLoader

<Router AppAssembly="typeof(App).Assembly"
        AdditionalAssemblies="lazyLoadedAssemblies" 
        OnNavigateAsync="OnNavigateAsync">
    <Navigating>
        <div style="padding:20px;background-color:blue;color:white">
            <p>Loading the requested page&hellip;</p>
        </div>
    </Navigating>
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

@code {
    private List<Assembly> lazyLoadedAssemblies = new();
    private bool grantImaharaRobotControlsAssemblyLoaded;

    private async Task OnNavigateAsync(NavigationContext args)
    {
        try
        {
            if ((args.Path == "robot") && !grantImaharaRobotControlsAssemblyLoaded)
            {
                var assemblies = await AssemblyLoader.LoadAssembliesAsync(
                    new[] { "GrantImaharaRobotControls.{FILE EXTENSION}" });
                lazyLoadedAssemblies.AddRange(assemblies);
                grantImaharaRobotControlsAssemblyLoaded = true;
            }
        }
        catch (Exception ex)
        {
            Logger.LogError("Error: {Message}", ex.Message);
        }
    }
}

@using System.Reflection
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.WebAssembly.Services
@using Microsoft.Extensions.Logging
@inject ILogger<App> Logger
@inject LazyAssemblyLoader AssemblyLoader

<Router AppAssembly="typeof(Program).Assembly"
        AdditionalAssemblies="lazyLoadedAssemblies" 
        OnNavigateAsync="OnNavigateAsync">
    <Navigating>
        <div style="padding:20px;background-color:blue;color:white">
            <p>Loading the requested page&hellip;</p>
        </div>
    </Navigating>
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

@code {
    private List<Assembly> lazyLoadedAssemblies = new List<Assembly>();
    private bool grantImaharaRobotControlsAssemblyLoaded;

    private async Task OnNavigateAsync(NavigationContext args)
    {
        try
        {
            if ((args.Path == "robot") && !grantImaharaRobotControlsAssemblyLoaded)
            {
                var assemblies = await AssemblyLoader.LoadAssembliesAsync(
                    new[] { "GrantImaharaRobotControls.{FILE EXTENSION}" });
                lazyLoadedAssemblies.AddRange(assemblies);
                grantImaharaRobotControlsAssemblyLoaded = true;
            }
        }
        catch (Exception ex)
        {
            Logger.LogError("Error: {Message}", ex.Message);
        }
    }
}

Uygulamayı derleyin ve çalıştırın.

RCL'den Robot bileşeni /robot adresinden istendiğinde, GrantImaharaRobotControls.{FILE EXTENSION} derlemesi yüklenir ve Robot bileşeni işlenir. Tarayıcının geliştirici araçlarının Ağ sekmesinde derleme yüklemesini inceleyebilirsiniz.

Sorun giderme

Önceki gezintiden bir bileşeni oluşturma gibi beklenmeyen durumlar meydana gelirse, iptal belirteci ayarlandığında kodun hata verdiğini doğrulayın.
Uygulama başlangıcında gecikmeli yükleme için yapılandırılmış derlemeler beklenmedik şekilde yüklenirse, derlemenin proje dosyasında gecikmeli yükleme için işaretlenip işaretlenmediğini denetleyin.

Not

Tembel yüklü bir derlemeden türlerin yüklenmesi için bilinen bir sorun var. Daha fazla bilgi için bkz. Blazor WebAssembly lazy loading assemblies not working when using @ref attribute in the component (dotnet/aspnetcore #29342).

Ek kaynaklar

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2025-11-11

Aracılığıyla paylaş

ASP.NET Core'da gecikmeli yük derlemeleri Blazor WebAssembly

Derleme dosyaları için dosya uzantısı yer tutucusu ({FILE EXTENSION})

Proje dosyası yapılandırması

Router bileşen yapılandırması

Yönlendirilebilir bileşenler içeren derlemeler

İçerikle <Navigating> kullanıcı etkileşimi

OnNavigateAsync uygulamasında iptalleri işleme

OnNavigateAsync etkinlikler ve yeniden adlandırılmış derleme dosyaları

Barındırılan Blazor WebAssembly çözümde gecikmeli yük derlemeleri

Tam örnek

Sorun giderme

Ek kaynaklar

Geri Bildirim

Ek kaynaklar

Derleme dosyaları için dosya uzantısı yer tutucusu (`{FILE EXTENSION}`)

`Router` bileşen yapılandırması

İçerikle `<Navigating>` kullanıcı etkileşimi

`OnNavigateAsync` uygulamasında iptalleri işleme

`OnNavigateAsync` etkinlikler ve yeniden adlandırılmış derleme dosyaları