[号外] 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 1024


gzip_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模式相差不大。

所以最后就看你的想法了，结果都在这里了。加油，奥里给！