Blazor WASM应用程序文件大小优化问题求助

一、自建NuGet包的裁剪配置 #

你的自建NuGet包仅包含.razor、.css、.cs文件，可以启用裁剪，但需避免裁剪掉反射或动态依赖的代码。配置方式如下：

• 在主项目或自建包的.csproj中添加：

  <PropertyGroup>
    <BlazorWebAssemblyEnableLinking>true</BlazorWebAssemblyEnableLinking>
    <TrimMode>partial</TrimMode> <!-- partial模式平衡裁剪程度和兼容性 -->
  </PropertyGroup>
  

• 如果自建包中有反射调用、动态类型创建等逻辑，需在linker.xml中添加保留规则，避免功能异常。

二、Brotli压缩覆盖JS/CSS的解决办法 #

微软默认的web.config可能仅针对.dll等.NET相关文件配置了Brotli压缩，需补充JS、CSS的MIME类型到压缩规则中。修改web.config如下：

<system.webServer>
  <httpCompression directory="%SystemDrive%\inetpub\temp\IIS Temporary Compressed Files">
    <scheme name="br" dll="%Windir%\system32\inetsrv\brotli.dll" />
    <dynamicTypes>
      <add mimeType="text/*" enabled="true" />
      <add mimeType="message/*" enabled="true" />
      <add mimeType="application/javascript" enabled="true" />
      <add mimeType="application/json" enabled="true" />
      <add mimeType="application/xml" enabled="true" />
      <add mimeType="application/xhtml+xml" enabled="true" />
      <add mimeType="*/*" enabled="false" />
    </dynamicTypes>
    <staticTypes>
      <add mimeType="text/*" enabled="true" />
      <add mimeType="message/*" enabled="true" />
      <add mimeType="application/javascript" enabled="true" />
      <add mimeType="application/json" enabled="true" />
      <add mimeType="application/xml" enabled="true" />
      <add mimeType="application/xhtml+xml" enabled="true" />
      <add mimeType="application/font-*" enabled="true" />
      <add mimeType="image/*" enabled="true" />
      <add mimeType="*/*" enabled="false" />
    </staticTypes>
  </httpCompression>
  <urlCompression doStaticCompression="true" doDynamicCompression="true" />
</system.webServer>

上述配置会对文本类型、JS、CSS、图片等静态/动态资源启用Brotli压缩，确保所有资源都能被压缩。

三、其他有效优化手段 #

1. 启用分层加载（Lazy Loading） #

将非首屏的页面、组件拆分到独立的RCL（Razor类库）中，配置分层后按需加载，减少初始下载体积：

• 在主项目.csproj中添加分层配置：

  <ItemGroup>
    <BlazorWebAssemblyLazyLoad Include="YourLazyRCL.dll" />
  </ItemGroup>
  

• 在路由中使用LazyAssemblyLoader动态加载组件：

  private readonly LazyAssemblyLoader _loader;
  public async Task LoadLazyComponent()
  {
      var assembly = await _loader.LoadAssembliesAsync(new[] { "YourLazyRCL.dll" });
      // 渲染对应组件
  }
  

2. 裁剪Telerik组件引用 #

Telerik Blazor组件支持按需引用，不要直接引用全量包，只引入项目实际用到的组件：

• 例如仅用Grid和Button组件，可在Program.cs中注册指定组件：

  builder.Services.AddTelerikBlazor()
      .AddGrid()
      .AddButton();
  

• 同时移除未使用的Telerik CSS文件，只保留所需组件的样式。

3. 启用AOT编译 #

.NET7 Blazor WASM支持AOT编译，将IL代码提前编译为WebAssembly字节码，减少初始下载的IL文件体积（压缩后效果更明显），但编译时间会延长：

• 在.csproj中添加：

  <PropertyGroup>
    <RunAOTCompilation>true</RunAOTCompilation>
  </PropertyGroup>
  

4. 静态资源压缩与清理 #

• 对wwwroot中的CSS、JS文件进行手动压缩（或使用BundleMinifier工具自动压缩），移除注释和空白字符；
• 删除未使用的静态资源（如图片、第三方JS库），用浏览器DevTools的Coverage工具排查未使用的代码。

5. 优化OIDC认证流程 #

• 将认证相关逻辑延迟加载，比如首屏不触发登录，待用户操作时再初始化OIDC；
• 精简OIDC请求的Scope，只保留必要的权限范围，减少认证过程中的数据传输。

6. 配置HTTP缓存策略 #

在web.config中为静态资源添加长缓存头，结合内容哈希命名文件（如app.hash.css），确保用户仅在资源更新时重新下载：

<staticContent>
  <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />
</staticContent>

内容的提问来源于stack exchange，提问作者Schoof