1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Blazor WASM のサイズを削減してみる

Last updated at Posted at 2022-09-13

はじめに

Blazor WASM のサイズ削減に関して、手順が公式 doc でまとめられていたので、少し前に作った Blazor WASM アプリケーションが実際どうなるのかを試してみました。

対象としたアプリケーション

Azure の Cognitive Service をたたいてその結果を表示するだけの簡単なアプリケーションです
System.drawing ではなくて SixLabors.ImageSharpを使っていたりしますが、ほぼほぼ Blazor WASM のテンプレートプロジェクトベースのお遊びアプリです
なお、.NET は 6 です。

※画像は Stabe Diffusion で生成したものです。ありがとうAI。

削減結果

もともと何もしていない素の状態だと、ブラウザ上で確認したところ、
image.png
3.9 MB の転送量が発生していました。

これが、設定を少しいれるだけで、
image.png
3.2 MB の転送量まで減りました。

だいたい 18% くらいの削減ですね。正直もう少し削減できるかなと思いましたが、まぁ設定いれただけなので、標準の状態がある程度優秀ということですかね。
ただ利用シナリオによっては有意義な結果にもなりそうなので、検討して損はない感じでしょうか

削減ステップ

基本的に公式 doc の Minimize app download size を参考に以下のステップで実施しました。
※2022/9/13時点での doc を見てやりました。更新されていくと思うのでご注意を

  1. ランタイムの再リンク
  2. トリマーを構成する
  3. Lazy load assemblies (サイズには関係ないので未実施)
  4. Compression (デフォルトでやってくれるので未実施)
  5. Disable unused features

以下それぞれ何をしたかのメモです。なお、リリースフォルダ自体の容量は、何もしていない場合 97.0 MB (リリースフォルダ全体) でした。これには各種圧縮ファイルなどが含まれていたりするのであんまり意味のない容量ですが、これがどう変わっていくかも記載します

1. ランタイムの再リンク

.NET WebAssembly ビルドツールをいれるだけで、やってくれます。

やったところ…
97.0 MB (リリースフォルダ全体) になりました。実は微増しちゃいました…残念

併せて Globalization を OFF にすると効果があるとのことなので、インバリアントグローバリゼージョンをみて、グローバリゼーションは不要なので、.csproj の <PropertyGroup> に以下を追加

<InvariantGlobalization>true</InvariantGlobalization>

やったところ…
84.9 MB (リリースフォルダ全体) に。ちょっと減りましたね。

2. トリマーを構成する

次にトリマーを構成するを確認して、トリミングしてみます。
これ色々と設定でいじれたりしますが、一旦は素の状態でやります。

.csproj の <PropertyGroup> に以下を追加

<PublishTrimmed>true</PublishTrimmed>

やったところ…
78.0 MB (リリースフォルダ全体) に。これもちょっと減りました。

5. Disable unused features

最後に使用しない機能を無効にするを見ながら、タイムゾーンも使っていないので、

.csproj の <PropertyGroup> に以下を追加

<BlazorEnableTimeZoneSupport>false</BlazorEnableTimeZoneSupport>

これをしたところ…
76.8 MB (リリースフォルダ全体) になりました。本当に少しですが削れましたね。

おわりに

とりあえず公式 doc に従って、特に調整せずにやった結果、3行追加するだけで、サイズ容量は 3.9 -> 3.2 MB になりました。

<PublishTrimmed>true</PublishTrimmed>
<InvariantGlobalization>true</InvariantGlobalization>
<BlazorEnableTimeZoneSupport>false</BlazorEnableTimeZoneSupport>

もっと削れるところをゴリゴリやることもできそうですが、お手軽にできる3行だけでもそれなりの削減効果にはなったのかなぁと。ただグローバリゼーションとかタイムゾーンとか使ってたら要注意ですが。

Blazor の WASM は WASM としてとっても開発しやすいので、これが .NET7 とかで今後さらにサイズが減っていくと良いなぁ

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?