Flutter开发进阶之Flutter Web加载速度优化

Flutter开发进阶之Flutter Web加载速度优化

通常使用Flutter开发的web加载速度会比较慢,原因是Flutter web需要加载的资源处于国外,以下是据此所做的相应优化。

一、FlutterWeb打包

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

使用新命令打包

复制代码
flutter build web --web-renderer canvaskit --no-tree-shake-icons --no-tree-shake-icons

二、进行本地调试

复制代码
cd build/web
python3 -m http.server 8080

启动本地服务

三、获取本机地址ip

复制代码
ipconfig getifaddr en0

四、浏览器加载web

以上通过获取本地ip和启动端口为8080的服务得到局域网内链接

通过浏览器查看web相关文件耗时

通过查看得知有三个文件耗时比较突出

canvaskit.js

复制代码
https://www.gstatic.com/flutter-canvaskit/a794cf2681c6c9fe7b260e0e84de96298dc9c18b/chromium/canvaskit.js

KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf

复制代码
https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf

canvaskit.wasm

复制代码
https://www.gstatic.com/flutter-canvaskit/a794cf2681c6c9fe7b260e0e84de96298dc9c18b/chromium/canvaskit.wasm

五、修改加载路径

canvaskit.js和canvaskit.wasm在本地路径下有对应文件但是还是从线上拿去最新的文件

可以通过打包命令修改其加载路径,得到最终的打包命令为

复制代码
flutter build web --web-renderer canvaskit --dart-define=FLUTTER_WEB_CANVASKIT_URL=/canvaskit/ --no-tree-shake-icons --no-tree-shake-icons

本地并未生成KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf,我们可以通过预先下载文件,放在web路径下

重新执行打包命令,最终打包结果如下

查看main.dart.js文件,查找到KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf

修改路径为相对路径

六、比对结果

重新从浏览器加载网页

canvaskit.js 323ms->3ms

KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf 376ms->6ms

canvaskit.wasm 661ms->39ms

整体文件加载时长从超过500ms减少到50ms以内,第一阶段加载速度优化完成。

相关推荐
weixin-a153003083162 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
失落的多巴胺5 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
帅次6 小时前
Objective-C面向对象编程:类、对象、方法详解(保姆级教程)
flutter·macos·ios·objective-c·iphone·swift·safari
孤水寒月6 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html
小蜜蜂嗡嗡6 小时前
flutter flutter_vlc_player播放视频设置循环播放失效、初始化后获取不到视频宽高
flutter
海的诗篇_7 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
鹏程8 小时前
局域网下五子棋,html+node.js实现
node.js·html
孤鸿玉8 小时前
[Flutter小技巧] Row中widget高度自适应的几种方法
flutter
bawomingtian1238 小时前
FlutterView 源码解析
flutter
小诸葛的博客9 小时前
gin如何返回html
前端·html·gin