文章目录

• ​​旧项目开启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的渲染模式（默认）

会自动根据是运行在移动浏览器端还是桌面浏览器端来选择渲染模式