之前第一篇的時(shí)候，因?yàn)闆]有用任意配置，導(dǎo)致wasm加載很慢，我就感覺不會(huì)是這樣的，為了不誤導(dǎo)小盆友，所以還是趁著周末研究了一波，做了相關(guān)的調(diào)整，經(jīng)過測(cè)試，速度基本可觀了，移動(dòng)端也能輕松駕馭。萬歲！

不說廢話，直接開整！

操作1、使用PWA

那什么是PWA呢：

PWA全稱Progressive Web App，即漸進(jìn)式WEB應(yīng)用。

一個(gè) PWA 應(yīng)用首先是一個(gè)網(wǎng)頁, 可以通過 Web 技術(shù)編寫出一個(gè)網(wǎng)頁應(yīng)用. 隨后添加上 App Manifest 和 Service Worker 來實(shí)現(xiàn) PWA 的安裝和離線等功能

解決了哪些問題？

1、可以添加至主屏幕，點(diǎn)擊主屏幕圖標(biāo)可以實(shí)現(xiàn)啟動(dòng)動(dòng)畫以及隱藏地址欄；

2、實(shí)現(xiàn)離線緩存功能，即使用戶手機(jī)沒有網(wǎng)絡(luò)，依然可以使用一些離線功能；

3、實(shí)現(xiàn)了消息推送；

它解決了上述提到的問題，這些特性將使得 Web 應(yīng)用漸進(jìn)式接近原生 App。

有一句話概況：可以實(shí)現(xiàn)部分緩存的功能到本地客戶端，后續(xù)刷新會(huì)加快！

那如何去配置呢，很簡單，官方已經(jīng)有了，只需要我們創(chuàng)建wasm的時(shí)候，勾選下就行了：

操作2：Ngxin gzip壓縮

因?yàn)槲覀兊膚asm項(xiàng)目，每次刷新需要用到很多dll的資源文件，所以我們需要在nginx中進(jìn)行壓縮處理，官方也建議我們這么做的：

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

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

gzip on; # 啟動(dòng)壓縮 gzip_min_length?5k;?#?文件大小<5k不壓縮，否則進(jìn)行壓縮處理 gzip_buffers 4 16k; # 設(shè)置壓縮所需要的緩沖區(qū)大小 gzip_comp_level?8;?#壓縮級(jí)別: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;#設(shè)置gzip壓縮針對(duì)的HTTP協(xié)議版本

關(guān)于相關(guān)的指令，我收集了下：

gzip 語法: gzip on|off 默認(rèn)值: gzip off 作用域: http, server, location, if (x) location 開啟或者關(guān)閉gzip模塊gzip_buffers 語法: gzip_buffers number size 默認(rèn)值: gzip_buffers 4 4k/8k 作用域: http, server, location 設(shè)置系統(tǒng)獲取幾個(gè)單位的緩存用于存儲(chǔ)gzip的壓縮結(jié)果數(shù)據(jù)流。例如 4 4k 代表以4k為單位，按照原始數(shù)據(jù)大小以4k為單位的4倍申請(qǐng)內(nèi)存。4 8k 代表以8k為單位，按照原始數(shù)據(jù)大小以8k為單位的4倍申請(qǐng)內(nèi)存。 如果沒有設(shè)置，默認(rèn)值是申請(qǐng)跟原始數(shù)據(jù)相同大小的內(nèi)存空間去存儲(chǔ)gzip壓縮結(jié)果。gzip_comp_level 語法: gzip_comp_level 1..9 默認(rèn)值: gzip_comp_level 1 作用域: http, server, location gzip壓縮比，1 壓縮比最小處理速度最快，9 壓縮比最大但處理最慢（傳輸快但比較消耗cpu）。gzip_min_length 語法: gzip_min_length length 默認(rèn)值: gzip_min_length 0 作用域: http, server, location 設(shè)置允許壓縮的頁面最小字節(jié)數(shù)，頁面字節(jié)數(shù)從header頭中的Content-Length中進(jìn)行獲取。 默認(rèn)值是0，不管頁面多大都?jí)嚎s。 建議設(shè)置成大于1k的字節(jié)數(shù)，小于1k可能會(huì)越壓越大。即: gzip_min_length 1024gzip_http_version 語法: gzip_http_version 1.0|1.1 默認(rèn)值: gzip_http_version 1.1 作用域: http, server, location 識(shí)別http的協(xié)議版本。由于早期的一些瀏覽器或者h(yuǎn)ttp客戶端，可能不支持gzip自解壓，用戶就會(huì)看到亂碼，所以做一些判斷還是有必要的。注：21世紀(jì)都來了，現(xiàn)在除了類似于百度的蜘蛛之類的東西不支持自解壓（百度就是SX，我就不說了），99.99%的瀏覽器基本上都支持gzip解壓了，所以可以不用設(shè)這個(gè)值,保持系統(tǒng)默認(rèn)即可。gzip_proxied 語法: gzip_proxied [off|expired|no-cache|no-store|private|no_last_modified|no_etag|auth|any] ... 默認(rèn)值: gzip_proxied off 作用域: http, server, location Nginx作為反向代理的時(shí)候啟用，開啟或者關(guān)閉后端服務(wù)器返回的結(jié)果，匹配的前提是后端服務(wù)器必須要返回包含"Via"的 header頭。 off - 關(guān)閉所有的代理結(jié)果數(shù)據(jù)的壓縮 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 ...] 默認(rèn)值: gzip_types text/html 作用域: http, server, location 匹配MIME類型進(jìn)行壓縮，（無論是否指定）"text/html"類型總是會(huì)被壓縮的。 注意：如果作為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; # 啟動(dòng)壓縮 gzip_min_length 5k; # 文件大小<5k不壓縮，否則進(jìn)行壓縮處理 gzip_buffers 4 16k; # 設(shè)置壓縮所需要的緩沖區(qū)大小 gzip_comp_level 8; #壓縮級(jí)別: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;#設(shè)置gzip壓縮針對(duì)的HTTP協(xié)議版本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

這個(gè)我就沒辦法演示了，雖然有azure賬號(hào)，可是沒錢

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

4、結(jié)果對(duì)比

服務(wù)端項(xiàng)目地址：mvp.neters.club

wasm項(xiàng)目地址：neters.club:5211

總體來說，我經(jīng)過刷新三次后的響應(yīng)時(shí)間分別是：

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

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

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

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

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。