ASP.NET Core Blazor WebAssembly启用压缩资源

2021-10-18 乐帮网

blazor web web assembly

发布 Blazor WebAssembly 应用时，我们可以对其资源的下载方式进行优化，以提升第一次打开的体验。将在发布过程中对输出内容进行静态压缩，从而减小应用的大小，并免去运行时压缩的开销。可以使用以下压缩算法：Brotli 和 Gzip。

如果你是在IIS中部署应用程序可以参考这里直接使用模块。https://docs.microsoft.com/zh-cn/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-5.0#brotli-and-gzip-compression

但是正常情况下我们都是自己托管部署的。那么可以借助google提供的一个decode.min.js文件来进行解压。
下载地址：https://github.com/google/brotli/tree/master/js

也可以从我的百度盘里下载：链接：https://pan.baidu.com/s/1lP8NZgPE_McGkqoI4EGONQ
提取码：jswk

使用过程如下：
（1）设置blazor.webassembly的启动方式
在index.html里找到

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

修改如下：

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

（2）承接上面，在这个js下面加一段解压js代码如下：注意此时我已经把 decode.min.js 放到了wwwroot下面

<script src="_framework/blazor.webassembly.js" autostart="false"></script>
<script type="module">
  import { BrotliDecode } from './decode.min.js';
  Blazor.start({
    loadBootResource: function (type, name, defaultUri, integrity) {
      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>

以上就是全部代码，是不是很简单。下面说一下注意事项。
如此修改好以后，会自动下载br后缀的文件进行加载，但是只是针对dll。如果你想要把其它资源例如img和js，css等也想要下载压缩版的，那么你可以把这些资源官方叫做"静态资产"单独放到一个项目类库里，然后在客户端再引入。同时使用方式也会发生变化

<img alt="..." src="/{PATH AND FILE NAME}" />

改变为以下：

<img alt="..." src="_content/{PACKAGE ID}/{PATH AND FILE NAME}" />

{PACKAGE ID} 占位符是库的包 ID。如果项目文件中没有指定 <PackageId>，则包 ID 默认为项目的程序集名称。 {PATH AND FILE NAME} 占位符是 wwwroot 下的路径和文件名。

https://docs.microsoft.com/zh-cn/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-5.0

关注我的微信公众号
在公众号里留言交流
投稿邮箱：1052839972@qq.com

庭院深深深几许？杨柳堆烟，帘幕无重数。
玉勒雕鞍游冶处，楼高不见章台路。
雨横风狂三月暮。门掩黄昏，无计留春住。
泪眼问花花不语，乱红飞过秋千去。

如果感觉对您有帮助
欢迎向作者提供捐赠
这将是创作的最大动力