Flutter开发进阶之Flutter Web加载速度优化
Flutter开发进阶之Flutter Web加载速度优化通常使用Flutter开发的web加载速度会比较慢，缘故起因是Flutter web需要加载的资源处于国外，以下是据此所做的相应优化。
https://img-blog.csdnimg.cn/07867dd2f7c945908220fb8d17a3a080.png
一、FlutterWeb打包
flutter build web --web-renderer canvaskit
https://img-blog.csdnimg.cn/47bd263741644725bf357b343894fa75.png
使用新命令打包
flutter build web --web-renderer canvaskit
--no-tree-shake-icons --no-tree-shake-icons https://img-blog.csdnimg.cn/c4dfe54420a54c9f836918f3754d5bb7.png
二、进行本地调试
cd build/web
python3 -m http.server 8080
启动本地服务
https://img-blog.csdnimg.cn/9952b362bf4246b5b9eca5fbfaada2fb.png
三、获取本机地址ip
ipconfig getifaddr en0
https://img-blog.csdnimg.cn/029c97ab56b145c6ad983dbcfdb64e8b.png
四、浏览器加载web
以上通过获取本地ip和启动端口为8080的服务得到局域网内链接
https://img-blog.csdnimg.cn/4e7f87452c8845eea88d15c55d54cabd.png
通过浏览器查看web相关文件耗时
https://img-blog.csdnimg.cn/c76e3be9aad1404cb892a4f325ef2b61.png
通过查看得知有三个文件耗时比较突出
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在本地路径下有对应文件但是照旧从线上拿去最新的文件
https://img-blog.csdnimg.cn/1ae5dc218886431fbf11278aeb3be5a2.png
可以通过打包命令修改其加载路径，得到终极的打包命令为
flutter build web --web-renderer canvaskit
--dart-define=FLUTTER_WEB_CANVASKIT_URL=/canvaskit/ --no-tree-shake-icons --no-tree-shake-icons 本地并未生成KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf，我们可以通过预先下载文件，放在web路径下
https://img-blog.csdnimg.cn/b087a0ed194247158f47a30847e94400.png
重新执行打包命令，终极打包结果如下
https://img-blog.csdnimg.cn/35106377d0fd445a8af94d3aa9100785.png
查看main.dart.js文件，查找到KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf
https://img-blog.csdnimg.cn/c15c78da3d814779b89b16f91d24dad0.png
修改路径为相对路径
https://img-blog.csdnimg.cn/561bd080b4aa4257bff6c7093e9e24d0.png
六、比对结果
重新从浏览器加载网页
https://img-blog.csdnimg.cn/a7d9337a8a1c43e2847126a21ecae66e.png
canvaskit.js 323ms->3ms
KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf 376ms->6ms
canvaskit.wasm 661ms->39ms
整体文件加载时长从高出500ms减少到50ms以内，第一阶段加载速度优化完成。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]