Wie optimiere ich WebAssembly auf 1 MB?

Blazor WebAssembly-Ladeoptimierungsschema

Die Optimierung der Blazor WebAssembly-Ladelösung zielt auf das erste Laden von WebAssembly ab, da BlazorWebAssembly beim ersten Laden alle Assemblys von .NET Core in den Browser lädt und möglicherweise auf viele DLLs von Drittanbietern verweist. verursacht langsames Laden;

Optimierung:

1. Komprimierung

​ Beim Veröffentlichen einer Blazor WebAssembly-Anwendung wird die Ausgabe während des Veröffentlichungsprozesses statisch komprimiert, wodurch die Größe der Anwendung reduziert und der Overhead der Laufzeitkomprimierung entfällt. Verwenden Sie die folgenden Komprimierungsalgorithmen:

• Brotli (höchste Stufe)
• Gzip

Holen Sie sich den JavaScript-Brotli-Decoder aus dem GitHub-Repository google/brotli . Die minimierten Decoderdateien werden benannt decode.min.jsund befinden sich im jsOrdner .

​ Ändern Sie wwwroot/index.htmlden Dateicode und fügen Sie autostart="false" hinzu, um zu verhindern, dass die Standard-Startup-Assembly geladen wird

<script src="_framework/blazor.webassembly.js" autostart="false"></script>

<script>Fügen Sie nach dem Tag von Blazor und </body>vor dem schließenden Tag den folgenden <script>Block :

<script type="module">
  import {
    
     BrotliDecode } from './decode.min.js';
  Blazor.start({
    
    
    loadBootResource: function (type, name, defaultUri, integrity) {
    
    
    // 注意：这里使用localhost的时候不会启动压缩
      if (type !== 'dotnetjs' && location.hostname !== 'localhost') {
    
    
        return (async function () {
    
    
          const response = await fetch(defaultUri + '.br', {
    
     cache: 'no-cache' });
          if (!response.ok) {
    
    
            throw new Error(response.statusText);
          }
          const originalResponseBuffer = await response.arrayBuffer();
          const originalResponseArray = new Int8Array(originalResponseBuffer);
          const decompressedResponseArray = BrotliDecode(originalResponseArray);
          const contentType = type === 
            'dotnetwasm' ? 'application/wasm' : 'application/octet-stream';
          return new Response(decompressedResponseArray, 
            {
    
     headers: {
    
     'content-type': contentType } });
        })();
      }
    }
  });
</script>

Das Komprimierungsschema verkürzt die Ladezeit, die etwa ein Drittel der Größe der komprimierten DLL beträgt, wie in der Abbildung dargestellt

[Externer Link-Bildtransfer fehlgeschlagen, die Quellseite verfügt möglicherweise über einen Anti-Diebstahl-Link-Mechanismus, es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-gemfSgVA-1676015504451)(https://foruda.gitee.com/images/ 1675065716253529521/2e337fd6_8229157.png „Screenshot“)]

Nach Verwendung autostart="false"des Tags wird es ohne Start geladen und die Ladeassembly wird im obigen Codeblock ausgeführt. Standardmäßig wird br geladen.

2. Lazy Loading Assemblys

Verbessern Sie die Startleistung der Blazor WebAssembly-App, indem Sie darauf warten, dass die Anwendungsassembly geladen wird, bis sie benötigt wird, was als „verzögertes Laden“ bezeichnet wird.

Teilen Sie das BlazorWebAssembly-Projekt sorgfältig auf und verbessern Sie die erste Ladezeit von BlazorWebAssembly durch verzögertes Laden der Assembly. Wir werden die Verzögerung beim Laden der Assembly anhand eines Falles erläutern

Erstellen Sie ein leeres Blazor WebAssembly-Projekt: Projektname Demand
[Externer Link Bildübertragung fehlgeschlagen, die Quellseite verfügt möglicherweise über einen Anti-Leech-Mechanismus, es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-oeVLPhzW-1676015504452)(https:// foruda.gitee.com /images/1675065709167081163/a9e98e61_8229157.png „Screenshot“)]

Abbrechen HTTPSder Nutzung progressiver Web-Apps

[Externer Link: Bildübertragung fehlgeschlagen, die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus. Es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-hiSh83QB-1676015504452)(https://foruda.gitee.com/images/1675065704598198762 /56cdbf29_8229157.png „Screenshot“)]

Beim Erstellen einer Razor-Klassenbibliothek der Projektname: Demand.Componentsund dann die Standardoption zum Erstellen des Projekts

[Externer Link-Bildtransfer fehlgeschlagen, die Quellseite verfügt möglicherweise über einen Anti-Diebstahl-Link-Mechanismus, es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-uZbSYYRb-1676015504453)(https://foruda.gitee.com/images/ 1675065696314750567/ae8155ac_8229157.png „Screenshot“)]

Erstellen Sie Components.razoreine Datei und löschen Sie redundante Dateien. Der Effekt ist wie in der Abbildung dargestellt:
[Externer Link Bildübertragung fehlgeschlagen, die Quellseite verfügt möglicherweise über einen Anti-Leech-Mechanismus. Es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-bvxcR04i -1676015504453)(https://foruda.gitee .com/images/1675065691848164281/cafa162d_8229157.png „Screenshot“)]
Fügen Sie Components.razorden folgenden Code hinzu:

@inject NavigationManager NavigationManager

@page "/components"

<div>
    <h1>
        Components
    </h1>
    
</div>
<button @onclick="Goto">跳转到首页</button>
@code
{
    private void Goto()
    {
        NavigationManager.NavigateTo("/");
    }
}

DemandVerweisen Sie auf Demand.Componentsdas Projekt im Projekt

Ändern Sie App.razordie Datei. Der Code lautet wie folgt:

@using System.Reflection
@using Microsoft.AspNetCore.Components.WebAssembly.Services

@*
    这里需要注意，WebAssembly是默认注入的但是Server并没有注入 
    在Server中手动注入
    builder.Services.AddScoped<LazyAssemblyLoader>();
*@
@inject LazyAssemblyLoader AssemblyLoader

<Router AppAssembly="@typeof(App).Assembly"
        AdditionalAssemblies="@lazyLoadedAssemblies"
        OnNavigateAsync="@OnNavigateAsync">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>

</Router>

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

    private async Task OnNavigateAsync(NavigationContext args)
    {
        try
        {
            if (args.Path == "components")
            {
                // 这里自定义Demand.Components依赖的程序集，
                var assemblies = await AssemblyLoader.LoadAssembliesAsync(new[] { "Demand.Components.dll" });
                // 添加到路由程序集扫描中
                lazyLoadedAssemblies.AddRange(assemblies);
            }
        }
        catch (Exception ex)
        {
        }
    }
}

Verarbeiten Sie die Baugruppe, die von der angegebenen Routing-Komponente geladen werden muss

DemandProjektdatei öffnen

Falls im Debug-Modus verfügbar, fügen Sie die folgende Ignorierliste hinzu:

<ItemGroup>
		<BlazorWebAssemblyLazyLoad Include="System.Xml.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Xml.XmlSerializer.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Xml.XmlDocument.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Xml.XPath.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Xml.XPath.XDocument.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Xml.XDocument.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Xml.Serialization.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Xml.ReaderWriter.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Xml.Linq.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Windows.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Net.Quic.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.IO.Compression.ZipFile.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Runtime.Numerics.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Collections.Immutable.dll" />
		<BlazorWebAssemblyLazyLoad Include="Microsoft.Win32.Registry.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Web.HttpUtility.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.ValueTuple.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Security.AccessControl.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Net.Mail.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Net.NameResolution.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.IO.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.IO.UnmanagedMemoryStream.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.IO.Pipes.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.IO.Pipes.AccessControl.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.IO.Pipelines.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.IO.FileSystem.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.IO.FileSystem.Watcher.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.IO.FileSystem.Primitives.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.IO.FileSystem.DriveInfo.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.IO.FileSystem.AccessControl.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Data.Common.dll" />
		<BlazorWebAssemblyLazyLoad Include="Microsoft.CSharp.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Console.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Core.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Data.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Data.DataSetExtensions.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Drawing.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Drawing.Primitives.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Diagnostics.TraceSource.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Diagnostics.Tools.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Diagnostics.TextWriterTraceListener.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Diagnostics.StackTrace.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Diagnostics.Process.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Diagnostics.FileVersionInfo.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Diagnostics.DiagnosticSource.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Diagnostics.Debug.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Diagnostics.Contracts.dll" />
		<BlazorWebAssemblyLazyLoad Include="Microsoft.AspNetCore.Authorization.dll" />
		<BlazorWebAssemblyLazyLoad Include="Microsoft.AspNetCore.Components.Forms.dll" />
		<BlazorWebAssemblyLazyLoad Include="Microsoft.AspNetCore.Metadata.dll" />
		<BlazorWebAssemblyLazyLoad Include="Microsoft.Extensions.Configuration.Binder.dll" />
		<BlazorWebAssemblyLazyLoad Include="Microsoft.Extensions.FileProviders.Abstractions.dll" />
		<BlazorWebAssemblyLazyLoad Include="Microsoft.Extensions.FileProviders.Physical.dll" />
		<BlazorWebAssemblyLazyLoad Include="Microsoft.Extensions.Configuration.FileExtensions.dll" />
		<BlazorWebAssemblyLazyLoad Include="Microsoft.Extensions.FileSystemGlobbing.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.IO.MemoryMappedFiles.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.IO.IsolatedStorage.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.IO.Compression.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.IO.Compression.FileSystem.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.IO.Compression.Brotli.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Formats.Tar.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Formats.Asn1.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Net.WebSockets.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Private.DataContractSerialization.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Private.Xml.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Security.Cryptography.dll" />
		<BlazorWebAssemblyLazyLoad Include="Microsoft.VisualBasic.dll" />
		<BlazorWebAssemblyLazyLoad Include="Microsoft.VisualBasic.Core.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Threading.Tasks.Dataflow.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Text.Encoding.CodePages.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Net.WebSockets.Client.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Private.Xml.Linq.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Text.RegularExpressions.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Net.Sockets.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Net.WebClient.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Net.WebProxy.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Net.Ping.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Security.Cryptography.X509Certificates.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Net.WebHeaderCollection.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Security.Cryptography.OpenSsl.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Security.Cryptography.Encoding.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Security.Cryptography.Csp.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Security.Cryptography.Cng.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Security.Claims.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Security.Cryptography.Algorithms.dll" />
		<BlazorWebAssemblyLazyLoad Include="Microsoft.Win32.Primitives.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Net.HttpListener.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.AppContext.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Net.NetworkInformation.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Net.Requests.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Net.Primitives.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Net.Security.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Net.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Net.ServicePoint.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Net.Http.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Globalization.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Globalization.Calendars.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Globalization.Extensions.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Net.Http.Json.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Web.dll" />
		<BlazorWebAssemblyLazyLoad Include="WindowsBase.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Resources.Writer.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Resources.ResourceManager.dll" />
		<BlazorWebAssemblyLazyLoad Include="System.Resources.Reader.dll" />
	</ItemGroup>

Dies sind einige Baugruppen, die nicht häufig verwendet werden. Wenn die folgenden Fehler auftreten, löschen Sie bitte die nicht gefundene Baugruppe und laden Sie die Konfiguration bei Bedarf .

[Externer Link-Bildtransfer fehlgeschlagen, die Quellseite verfügt möglicherweise über einen Anti-Diebstahl-Link-Mechanismus, es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-Ao9q8dAE-1676015504453)(https://foruda.gitee.com/images/ 1675065662767429495/62e04099_8229157.png „Screenshot“)]

Wenn jedoch die obige On-Demand-Ladekonfiguration verwendet wird, tritt während der Veröffentlichung eine Ausnahme auf, wie in der folgenden Abbildung dargestellt. Der Grund für den Fehler liegt darin, dass Blazor WebAssembly beim Veröffentlichen standardmäßig Ausschneiden verwendet, da die folgenden Assemblys zufällig nicht verwendet werden . Zukünftig wird das On-Demand-Laden konfiguriert, aber es wurde gekürzt, sodass die On-Demand-Loading-Assembly nicht gefunden werden kann; löschen Sie einfach die Fehlerberichts-Assembly; diese wird nur angezeigt, wenn sie veröffentlicht wird, und Debug kann weiterhin Verwenden Sie weiterhin das oben genannte. Die On-Demand-Ladekonfiguration kann während des Debuggens schneller reagieren
[Externer Link Bildübertragung fehlgeschlagen, die Quellseite verfügt möglicherweise über einen Anti-Leech-Mechanismus, es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-JySGml6H- 1676015504454)(https:// foruda.gitee.com/images/1675065669456522621/e7e0195e_8229157.png „Screenshot“)]

dann der nächste Schritt

Fügen Sie die On-Demand-Ladekonfiguration des angegebenen Projekts hinzu. Wir konfigurieren Demand.Componentsdas Projekt.

	<ItemGroup>
    	<BlazorWebAssemblyLazyLoad Include="Demand.Components.dll" />
	</ItemGroup>

Pages/Index.razorDateicode ändern

@page "/"
@inject NavigationManager NavigationManager
<h1>Hello, world!</h1>

<button @onclick="Goto">跳转到components</button>
@code
{
    private void Goto()
    {
        NavigationManager.NavigateTo("/components");
    }
}

Starten Sie dann das Projekt, öffnen Sie das F12-Entwickler-Debugging-Tool, klicken Sie, 应用程序um den Speicher zu finden, und klicken Sie, um die Website-Daten zu löschen (die Assembly wird nach dem ersten Laden zwischengespeichert):

[Externer Link-Bildtransfer fehlgeschlagen, die Quellseite verfügt möglicherweise über einen Anti-Diebstahl-Link-Mechanismus, es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-juz04kbZ-1676015504454) (https://foruda.gitee.com/images/ 1675065647531740783/161df063_8229157.png „Screenshot“)]

Klicken Sie auf das Netzwerk und aktualisieren Sie dann die Benutzeroberfläche. Wir sehen, dass es hier nicht geladen wird Demand.Components.dll, aber die Assembly hier:
[Externer Link Bildübertragung fehlgeschlagen, die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus. Es wird empfohlen, diese zu speichern Bild und laden Sie es direkt hoch (img-EcTMxaur- 1676015504454)(https://foruda.gitee.com/images/1675065640377404774/06b34075_8229157.png "Screenshot")]
und klicken Sie auf die Schaltfläche auf der Benutzeroberfläche:

[Bildübertragung mit externem Link fehlgeschlagen, die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus. Es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-eeMMpnf0-1676015504454)(https://foruda.gitee.com/images/1675065628605783263 /65556ef2_8229157.png „Screenshot“)]

Wenn diese Zeit gekommen ist 调试工具的网络, sehen wir Demand.Components.dll, dass sie geladen wurde. Diese Assembly wird nur geladen, wenn wir sie verwenden, und die Assembly wird nicht wiederholt geladen, wenn wir der Schnittstelle zum zweiten Mal beitreten.

[Externer Link-Bildtransfer fehlgeschlagen, die Quellseite verfügt möglicherweise über einen Anti-Diebstahl-Link-Mechanismus, es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-c0d6Uht1-1676015504455) (https://foruda.gitee.com/images/ 1675065615077323202/f4068427_8229157.png „screen Screenshot“)]
und dann veröffentlichen wir das Projekt (denken Sie beim Veröffentlichen an das oben erwähnte Problem, dass das Ausschneiden zum Verlust von Baugruppen geführt hat und kein On-Demand-Laden möglich ist, bereinigen Sie einfach die abgeschnittenen Baugruppen in die On-Demand-Ladekonfiguration):

[Externer Link-Bildtransfer fehlgeschlagen, die Quellseite verfügt möglicherweise über einen Anti-Diebstahl-Link-Mechanismus, es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-OLiYCDQt-1676015504455)(https://foruda.gitee.com/images/ 1675065607571541966/8a38d669_8229157.png „Screenshot“)]

Verwenden Sie dann Docker Compose, um einen Nginx-Proxy bereitzustellen, um den Effekt zu sehen:

Erstellen Sie docker-compose.ymleine Datei und fügen Sie den folgenden Code hinzu , um zwei Ordner imdocker-compose.yml aktuellen Verzeichnis zu erstellen:conf.dwwwroot

services:
  nginx:
    image: nginx:stable-alpine
    container_name: nginx
    volumes:
      - ./conf.d:/etc/nginx/conf.d
      - ./wwwroot:/wwwroot
    ports:
      - 811:80

Erstellen conf.dSie webassembly.confden folgenden Code und fügen Sie ihn hinzu:

server {
    listen 80;
    server_name http://localhost;
    
    location / {
        root /wwwroot;
        index index.html;
    }
    
}

Starten Sie dann den Nginx-Dienst docker-compose.ymlin dem Verzeichnis, in das er gehörtdocker-compose up -d

Öffnen Sie den Browserzugriff http://127.0.0.1:811/(verwenden Sie keinen Localhost-Zugriff, die Komprimierung ist standardmäßig nicht aktiviert) und öffnen Sie dann das F12-Debugging-Tool, löschen Sie den Speicher in der Anwendung, öffnen Sie die Netzwerkoption, aktualisieren Sie den Browser. Der Ladevorgang ist abgeschlossen und optimiert 2,3 MB, komprimiert starten und nicht verwendete Baugruppen beim Veröffentlichen ausschneiden:
[Externer Link Bildübertragung fehlgeschlagen, die Quellseite verfügt möglicherweise über einen Anti-Leech-Mechanismus, es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-rn2bulz2-1676015504455)( https:// foruda.gitee.com/images/1675065598192463678/bcec281c_8229157.png „Screenshot“)]

Extrem optimiert auf 1 MB

Fügen Sie der DemandProjektdatei die folgende Konfiguration hinzu. Die folgende Konfiguration deaktiviert einige Funktionen, wie z. B. die Globalisierung usw.

<PublishTrimmed>true</PublishTrimmed>
<InvariantGlobalization>true</InvariantGlobalization>
<BlazorEnableTimeZoneSupport>false</BlazorEnableTimeZoneSupport>
<EventSourceSupport>false</EventSourceSupport>
<HttpActivityPropagationSupport>false</HttpActivityPropagationSupport>
<EnableUnsafeBinaryFormatterSerialization>false</EnableUnsafeBinaryFormatterSerialization>
<MetadataUpdaterSupport>false</MetadataUpdaterSupport>
<UseNativeHttpHandler>true</UseNativeHttpHandler>

Dann setzen wir den obigen Vorgang fort, um ihn zu veröffentlichen und auf Nginx bereitzustellen

Wenn wir die Ladegröße im Netzwerk überprüfen, können wir sehen, dass sie 1 MB erreicht hat und nach dem Entfernen einiger js kleiner sein sollte, sodass das Ladeproblem weitgehend gelöst wurde (aus dem Vorschlag von Xiao Yekun ) .

Ende

Wenn Sie einen besseren Optimierungsplan haben, kontaktieren Sie mich bitte

Kommen Sie und teilen Sie es mit einem Token

Demo-Adresse

GitHub

Gitee