Flutter 开启web构建以及web的两种渲染模式

文章目录

• ​​旧项目开启web端构建​​
• ​​渲染模式​​

• ​​HTML渲染模式​​
• ​​CanvasKit渲染模式​​
• ​​auto的渲染模式（默认）​​

旧项目开启web端构建

flutter config --enable-web      

在项目路径下执行（其实就是对当前项目重新配置一下）：

flutter create .      

通过：

flutter config      

可以看到目前支持的终端：

Settings:
  enable-macos-desktop: true
  enable-web: true      

渲染模式

HTML渲染模式

html渲染模式：flutter会采用HTML的custom element，CSS，Canvas和SVG来渲染UI元素

优点：

• 应用体积更小

缺点：

• 渲染性能差
• 跨端一致性可能受影响

flutter build web --web-renderer html      

CanvasKit渲染模式

当canvaskit渲染模式：flutter将 Skia 编译成 WebAssembly 格式，并使用 WebGL 渲染。应用在移动和桌面端保持一致，有更好的性能，以及降低不同浏览器渲染效果不一致的风险。但是应用的大小会增加大约 2MB。

flutter build web --web-renderer canvaskit      

优点：

• 像素级跨端一致性
• 更好的渲染性能

• 应用体积变大，需要加载一个2.5MB的​

  ​webaseembly​

  ​格式的代码

auto的渲染模式（默认）