[号外] Blazor wasm 其实也挺快！

之前第一篇的时候，因为没有用任意配置，导致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账号，可是没钱