Blazor 发布注意事项
起因
Blazor项目发布的时候,还是需要宿主进行配置,IIS的简单(默认会生成一个config文件,有文件响应类型),本文主要说一下Kestrel的配置,因为Blazor Client还是需要服务端进行数据的获取和更新.对Blazor优化加载速度的方式很多,这里是针对第一次加载.采用在宿主开启压缩的方式,其实还可以通过引用decode.min.js(目前还有问题,可以查看https://github.com/google/brotli/issues/844)加载已经压缩的wasm/dll文件.
使用压缩过的br/gz包即可以提高加载速度,加载快了,也算是性能优化的一种方式了.
*如果使用Blazor,一定要使用.Net 5,在.Net 5对Blazor进行不少优化,性能提高了不少,如果.Net 6出来了,则优先使用.Net 6.从github看.Net 和 asp.net core最近提交的源码还在对Blazor进行大量的改进.
1. 项目发布配置
选择Release 64位,尽量选择64位,是因为后期编译器主要针对64位程序优化,比如Arm下是不支持32位的.未来64位是主流.
2. Kestrel增加文件响应类型
在项目发布的文件目录中,可以看到web.config文件,找到需要增加文件类型.<mimeMap fileExtension=".dll" mimeType="application/octet-stream" />
<mimeMap fileExtension=".dat" mimeType="application/octet-stream" />
<mimeMap fileExtension=".json" mimeType="application/json" />
<mimeMap fileExtension=".wasm" mimeType="application/wasm" />
<mimeMap fileExtension=".woff" mimeType="application/font-woff" />
<mimeMap fileExtension=".woff2" mimeType="application/font-woff" />在Startup.cs文件Configure函数中,在静态文件中间件增加文件响应类型.
var mimeType = new FileExtensionContentTypeProvider();
//Mappings字典中包含常用mime头的,是在实例FileExtensionContentTypeProvider 调用FileExtensionContentTypeProvider(IDictionary<string, string> mapping)
//一般不需要手动指定
mimeType.Mappings[".dll"] = "application/octet-stream"; //字典key 为文件后缀名 value为文件对应mime头
mimeType.Mappings[".dat"] = "application/octet-stream";
mimeType.Mappings[".json"] = "application/json";
mimeType.Mappings[".wasm"] = "application/wasm";
mimeType.Mappings[".woff"] = "application/font-woff";
mimeType.Mappings[".woff2"] = "application/font-woff";
//app.UseCustomMiddleware();
app.UseStaticFiles(new StaticFileOptions()
{
ContentTypeProvider = mimeType, //增加新的文件响应类型
OnPrepareResponse = context =>
{
context.Context.Response.Headers["Cache-Control"] = $"public,max-age=7200"; //通知客户端进行缓存7200秒
}
});3. Kestrel开启br/gzip压缩,减少wasm/dll的大小,加快Blazor的加载速度
public void ConfigureServices(IServiceCollection services)
{
//开启br和gzip压缩
services.AddResponseCompression(options =>
{
//options.Providers.Add<CustomResponseCompressionProvider>();
options.Providers.Add<BrotliCompressionProvider>();
options.Providers.Add<GzipCompressionProvider>();
});
//配置BrotliCompression 压缩级别 Optimal(最佳的压缩方式,耗费的时间较长) Fastest(最快的压缩方式) NoCompression(不进行压缩)
services.Configure<BrotliCompressionProviderOptions>(config =>
{
config.Level = CompressionLevel.Fastest;
});
//配置Gzip 压缩级别 Optimal(最佳的压缩方式,耗费的时间较长) Fastest(最快的压缩方式) NoCompression(不进行压缩)
services.Configure<GzipCompressionProviderOptions>(config =>
{
config.Level = CompressionLevel.Fastest;
});
}// 在Configure函数中开启压缩
app.UseResponseCompression();Blazor第一次加载:
在Kestrel中开启压缩后,wasm包大小:
4. Blazor 组件中,中文乱码
在Blazor Client默认项目模版,在FetchData.razor组件中,使用中文乱码.
在Vs进行编码的时候,是没有乱码的,但进行反编译查看的时候,发现已经是乱码了.
可以推测是文件编码,用记事本查看一下文件编码,发现不是UTF-8,改为UTF-8.编译运行结果:
秋风
2020-12-21