之前第一篇的時候，因為沒有用任意配置，導致wasm加載很慢，我就感覺不會是這樣的，為了不誤導小盆友，所以還是趁著周末研究了一波，做了相關的調整，經過測試，速度基本可觀了，移動端也能輕松駕馭。萬歲！

不說廢話，直接開整！

操作1、使用PWA

那什么是PWA呢：

PWA全稱Progressive Web App，即漸進式WEB應用。

一個 PWA 應用首先是一個網頁, 可以通過 Web 技術編寫出一個網頁應用. 隨后添加上 App Manifest 和 Service Worker 來實現 PWA 的安裝和離線等功能

解決了哪些問題？

1、可以添加至主屏幕，點擊主屏幕圖標可以實現啟動動畫以及隱藏地址欄；

2、實現離線緩存功能，即使用戶手機沒有網絡，依然可以使用一些離線功能；

3、實現了消息推送；

它解決了上述提到的問題，這些特性將使得 Web 應用漸進式接近原生 App。

有一句話概況：可以實現部分緩存的功能到本地客戶端，后續刷新會加快！

那如何去配置呢，很簡單，官方已經有了，只需要我們創建wasm的時候，勾選下就行了：

操作2：Ngxin gzip壓縮

因為我們的wasm項目，每次刷新需要用到很多dll的資源文件，所以我們需要在nginx中進行壓縮處理，官方也建議我們這么做的：

https://docs.microsoft.com/en-us/aspnet/core/host-and-deploy/blazor/?view=aspnetcore-3.1&tabs=visual-studio

很簡單，直接在nginx.conf配置接口：

gzip on; # 啟動壓縮 gzip_min_length?5k;?#?文件大小<5k不壓縮，否則進行壓縮處理 gzip_buffers 4 16k; # 設置壓縮所需要的緩沖區大小 gzip_comp_level?8;?#壓縮級別:1-9，值越大壓縮的越明顯 gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/octet-stream; # 壓縮文件類型 gzip_vary?on;?#?是否在http?header中添加Vary:?Accept-Encoding，建議開啟 gzip_http_version?1.0;#設置gzip壓縮針對的HTTP協議版本

關于相關的指令，我收集了下：

gzip 語法: gzip on|off 默認值: gzip off 作用域: http, server, location, if (x) location 開啟或者關閉gzip模塊gzip_buffers 語法: gzip_buffers number size 默認值: gzip_buffers 4 4k/8k 作用域: http, server, location 設置系統獲取幾個單位的緩存用于存儲gzip的壓縮結果數據流。例如 4 4k 代表以4k為單位，按照原始數據大小以4k為單位的4倍申請內存。4 8k 代表以8k為單位，按照原始數據大小以8k為單位的4倍申請內存。 如果沒有設置，默認值是申請跟原始數據相同大小的內存空間去存儲gzip壓縮結果。gzip_comp_level 語法: gzip_comp_level 1..9 默認值: gzip_comp_level 1 作用域: http, server, location gzip壓縮比，1 壓縮比最小處理速度最快，9 壓縮比最大但處理最慢（傳輸快但比較消耗cpu）。gzip_min_length 語法: gzip_min_length length 默認值: gzip_min_length 0 作用域: http, server, location 設置允許壓縮的頁面最小字節數，頁面字節數從header頭中的Content-Length中進行獲取。 默認值是0，不管頁面多大都壓縮。 建議設置成大于1k的字節數，小于1k可能會越壓越大。即: gzip_min_length 1024gzip_http_version 語法: gzip_http_version 1.0|1.1 默認值: gzip_http_version 1.1 作用域: http, server, location 識別http的協議版本。由于早期的一些瀏覽器或者http客戶端，可能不支持gzip自解壓，用戶就會看到亂碼，所以做一些判斷還是有必要的。注：21世紀都來了，現在除了類似于百度的蜘蛛之類的東西不支持自解壓（百度就是SX，我就不說了），99.99%的瀏覽器基本上都支持gzip解壓了，所以可以不用設這個值,保持系統默認即可。gzip_proxied 語法: gzip_proxied [off|expired|no-cache|no-store|private|no_last_modified|no_etag|auth|any] ... 默認值: gzip_proxied off 作用域: http, server, location Nginx作為反向代理的時候啟用，開啟或者關閉后端服務器返回的結果，匹配的前提是后端服務器必須要返回包含"Via"的 header頭。 off - 關閉所有的代理結果數據的壓縮 expired - 啟用壓縮，如果header頭中包含 "Expires" 頭信息 no-cache - 啟用壓縮，如果header頭中包含 "Cache-Control:no-cache" 頭信息 no-store - 啟用壓縮，如果header頭中包含 "Cache-Control:no-store" 頭信息 private - 啟用壓縮，如果header頭中包含 "Cache-Control:private" 頭信息 no_last_modified - 啟用壓縮,如果header頭中不包含 "Last-Modified" 頭信息 no_etag - 啟用壓縮 ,如果header頭中不包含 "ETag" 頭信息 auth - 啟用壓縮 , 如果header頭中包含 "Authorization" 頭信息 any - 無條件啟用壓縮gzip_types 語法: gzip_types mime-type [mime-type ...] 默認值: gzip_types text/html 作用域: http, server, location 匹配MIME類型進行壓縮，（無論是否指定）"text/html"類型總是會被壓縮的。 注意：如果作為http server來使用，主配置文件中要包含文件類型配置文件

最后我的nginx.conf配置文件是這樣的：

# For more information on configuration, see: # * Official English Documentation: http://nginx.org/en/docs/ # * Official Russian Documentation: http://nginx.org/ru/docs/user nginx; worker_processes auto; error_log /var/log/nginx/error.log; pid /run/nginx.pid;# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic. include /usr/share/nginx/modules/*.conf;events {worker_connections 1024; }http {log_format main '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_referer" ''"$http_user_agent" "$http_x_forwarded_for"';access_log /var/log/nginx/access.log main;sendfile on;tcp_nopush on;tcp_nodelay on;types_hash_max_size 2048;include /etc/nginx/mime.types;default_type application/octet-stream;# Load modular configuration files from the /etc/nginx/conf.d directory.# See http://nginx.org/en/docs/ngx_core_module.html#include# for more information.include /etc/nginx/conf.d/*.conf;keepalive_timeout 600;proxy_read_timeout 600;proxy_send_timeout 600;proxy_buffer_size 128k;proxy_buffers 32 32k;proxy_busy_buffers_size 128k;gzip on; # 啟動壓縮 gzip_min_length 5k; # 文件大小<5k不壓縮，否則進行壓縮處理 gzip_buffers 4 16k; # 設置壓縮所需要的緩沖區大小 gzip_comp_level 8; #壓縮級別:1-9，值越大壓縮的越明顯 gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/octet-stream; # 壓縮文件類型 gzip_vary on; # 是否在http header中添加Vary: Accept-Encoding，建議開啟 gzip_http_version 1.0;#設置gzip壓縮針對的HTTP協議版本server {listen 80 default_server;listen [::]:80 default_server;server_name _;root /usr/share/nginx/html;# Load configuration files for the default server block.include /etc/nginx/default.d/*.conf;location / {}error_page 404 /404.html;location = /40x.html {}error_page 500 502 503 504 /50x.html;location = /50x.html {}}###### 這里是blazor wasm版本#######server {listen 5211;server_name localhost;location / {try_files $uri $uri/ /index.html;root /home/Blog.MVP.Blazor/Blog.MVP.Blazor/bin/Release/netstandard2.1/publish/wwwroot;index index.html index.htm;} } ######?這里是blazor.server版本?#######server {listen 80;server_name mvp.neters.club;rewrite?^(.*)$?https://$host$1?permanent;#charset?koi8-r;#access_log logs/host.access.log main;location / {root html;index index.html index.htm;}} server {listen 443 ssl;server_name mvp.neters.club; ssl_certificate /etc/nginx/conf.d/1_mvp.neters.club_bundle.crt;ssl_certificate_key /etc/nginx/conf.d/2_mvp.neters.club.key;ssl_session_timeout 5m;ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;ssl_prefer_server_ciphers on;location / {proxy_pass http://localhost:5050;index index.php index.html index.htm;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection keep-alive;proxy_set_header Host $host;proxy_cache_bypass $http_upgrade;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;} } }

操作3、可以配置CDN

這個我就沒辦法演示了，雖然有azure賬號，可是沒錢

意思肯定都能明白是干啥的，以后自己公司搞事情，可以試試這個方案。

4、結果對比

服務端項目地址：mvp.neters.club

wasm項目地址：neters.club:5211

總體來說，我經過刷新三次后的響應時間分別是：

（wasm模式總大小6m，最終時間1.73s）

（server模式總大小約420k，最終時間1.32s）

可能你會說，這都是緩存后的，敢不敢來個首次加載，來看看，用瀏覽器無痕模式重新打開試試，只計算第一次加載：

（wasm模式總大小約6m，最終時間4.66s）

（server模式總大小約420k，最終時間1.39s）

從數據上也能看出來，首屏首次加載，確實wasm比較慢，共5s左右，但是之后無論怎么刷新，速度都會有server模式相差不大。

所以最后就看你的想法了，結果都在這里了。加油，奧里給！

總結

以上是生活随笔為你收集整理的[号外] Blazor wasm 其实也挺快！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。