Flutter2.0构建Web应用两种渲染器比较

╰半橙微兮° 2022-10-22 10:52 169阅读 0赞

# 前言 #

接触Flutter开发的时间并不长，最早关注到Flutter，就是听说它可以跨端开发iOS，Android，Web端。直到上周看了Flutter2.0的发布，才知道，原来跨web端才刚刚stable呀...

那我们来真实的体验一下，Flutter发布web应用究竟靠不靠谱？

# 开启web端构建 #

使用下面这个命令才可以开启Web端构建的支持

flutter config --enable-web
    复制代码

开启后我们再次输入flutter config可以看到

![image.png][]

## 创建新项目 ##

这样每次新建Flutter项目时，都是支持web端构建的，会默认多出一个构建配置目录`web`。

![image.png][image.png 1]

*即使某个项目不需要支持web端构建也无须去特意关掉这个支持，不使用构建web的命令即可*

## 旧项目开启web支持 ##

其实就是对当前项目重新配置一下

flutter create .
    复制代码

# 调试web端 #

在没有其他端环境可用的情况下，使用以下命令会直接编译web端并打开chrome进行调试

flutter run
    复制代码

![image.png][image.png 2]

# 编译发行Web端 #

> Flutter在构建web端应用时，可以选择两种渲染模式。下面给大家演示下，大家注意仔细看看截图中我标记了红框的部分。

## HTML渲染模式 ##

flutter build web --web-renderer html
    复制代码

![image.png][image.png 3]

> 当我们采用html渲染模式时，flutter会采用HTML的custom element，CSS，Canvas和SVG来渲染UI元素

![image.png][image.png 4]

优点：

*  应用体积更小

缺点：

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

## CanvasKit渲染模式 ##

flutter build web --web-renderer canvaskit
    复制代码

![image.png][image.png 5]

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

![image.png][image.png 6]

优点：

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

缺点：

*  应用体积变大，需要加载一个2.5MB的`webaseembly`格式的代码

> 还有一个auto的渲染模式（默认），会自动根据是运行在移动浏览器端还是桌面浏览器端来选择渲染模式

# 结论 #

随着Flutter2.0的发布，这个带着【全平台像素级跨端一致性的】框架会更加倍受关注。虽然Web端的编译结果无论哪种渲染方式暂时在国内的web体验标准下都还差点意思，但是真的很值得期待。

作者：大帅老猿  
链接：https://juejin.cn/post/6938229167569764359  
来源：掘金  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[image.png]: /images/20221022/4c7f473ab3a64ab69c7919747d0563b1.png
[image.png 1]: /images/20221022/fffe0e7eb4614ed98d157f4ef5ac0dcf.png
[image.png 2]: /images/20221022/1c032c8b00144e4ab5982b3b0337606b.png
[image.png 3]: /images/20221022/a59e1a6cb7ba499da47990e0f6dbedcf.png
[image.png 4]: /images/20221022/d87a7190434e4447bea5f34684a879ae.png
[image.png 5]: /images/20221022/a0a7e6939886417e9242459259b7f7e4.png
[image.png 6]: /images/20221022/45fbb9f7315f458aae43512cf00f992c.png