flutter 开发web端的性能优化

server/2025/3/28 13:08:11/

参考资料

Flutter for Web 首次首屏优化 ——JS 分片优化_main.dart.js-CSDN博客文章浏览阅读1.4k次。本文介绍了如何通过延迟加载组件和js分片优化Flutter for Web应用的加载速度。在实践中，通过按需加载减少js文件大小，使用并行加载提升加载效率。通过延迟加载组件功能，将各页面代码拆分，减少初始加载体积。此外，通过在index.html中预加载分片js实现并行加载，进一步减少加载时间。实测结果显示，优化措施显著提升了页面加载速度。 https://blog.csdn.net/u012181546/article/details/128355930一个编译问题带你了解 Flutter Web 的打包构建和分包实现_flutter web js分包-CSDN博客文章浏览阅读1.4k次。Flutter Web 作为 Flutter 框架中最特殊的平台，由于 Web 平台的特殊性，它默认就具备了两种不同的渲染引擎：html ： 通过平台的 canvas 和 Element 完成布局绘制；canvaskit ： 通过 Webassembly + Skia 绘制控件；虽然都知道 canvavskit 更接近 Flutter 的设计理念，但是由于它构建的 wasm 文件大小和字体加载等问题带来的成本考虑，业界一般会选用更轻量化的 html 引擎，而今天的问题也是基于 html 引擎来展开。_flutter web js分包 https://blog.csdn.net/qq_39221436/article/details/123802726?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0-123802726-blog-128355930.235^v43^pc_blog_bottom_relevance_base2&spm=1001.2101.3001.4242.1&utm_relevant_index=2Flutter for web 首次加载过慢问题优化_flutter web 字体-CSDN博客文章浏览阅读6.8k次。本文针对Flutter for Web应用首次加载出现长时间白屏问题进行优化，主要从两个方面着手：一是通过更换Canvaskit的加载地址，使用国内CDN加速；二是处理字体加载，避免在线加载Noto字体导致的延迟和乱码，可选择自定义字体并精简资源。此外，删除不必要的系统资源包和添加加载动画也能提升用户体验。 https://blog.csdn.net/Bright_TY/article/details/120225419?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7EPaidSort-1-120225419-blog-128355930.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7EPaidSort-1-120225419-blog-128355930.235%5Ev43%5Epc_blog_bottom_relevance_base2&utm_relevant_index=1

 Flutter web - 5 项目打包优化_flutter 打包web-CSDN博客文章浏览阅读1.6k次，点赞10次，收藏29次。目前flutter对web的打包产物优化较少，存在单个文件体积过大问题，打包文件名没有hash值，如果有使用CDN会存在资源不能及时更新问题。本文章会对这些问题进行优化。_flutter 打包web https://blog.csdn.net/qq_35886767/article/details/142146893

Flutter Web 在《一起漫部》的性能优化探索与实践一起漫部 是基于区块链技术创造的新型数字生活。 渲染模式 首屏 - 掘金一起漫部 是基于区块链技术创造的新型数字生活。 渲染模式 首屏白屏 优化方案 启屏页优化 包体积优化 去除无用的icon 裁剪字体文件 deferred延迟加载 启用gzip压缩https://juejin.cn/post/7149441892994777125#heading-0 https://juejin.cn/post/7177202619788558391?searchId=20240802160128D41C1977573AE3CC625F#heading-0https://juejin.cn/post/7177202619788558391?searchId=20240802160128D41C1977573AE3CC625F#heading-0

 

deferred_helper | Flutter packageA plugin to help manage deferred content of a flutter aphttps://pub.dev/packages/deferred_helper

https://juejin.cn/post/7068533637364334622https://juejin.cn/post/7068533637364334622

github中的issure 关于web打包分片的提案-》让nginx开gzip压缩

main.dart.js is too large · Issue #46589 · flutter/flutter · GitHub

web性能查看工具

Debug performance for web apps | Flutter 中文文档 - Flutter 中文开发者网站 - Flutter

官方给的优化方案

https://medium.com/flutter/best-practices-for-optimizing-flutter-web-loading-speed-7cc0df14ce5c

1、声明 延迟（deferred） 导入包

如：

import 'package:myapp/hello.dart' deferred as hello;Future<void> loadHelloLibrary() async {await hello.loadLibrary();hello.sayHi();
}

2、图片资源修改为webp格式

一、核心优化方向

1. 关键资源体积最小化

  • 启用 Tree Shaking 和压缩：声明html方式官方已不支持

  • Web 渲染器 | Flutter 中文文档 - Flutter 中文开发者网站 - Flutter

  • canvaskit 和 skwasm

    flutter build web --release --web-renderer skwasm 

  • 仅打包首屏必要代码：

    • 使用路由懒加载（如 AutoRoute 或手动 import()）。

    • 将非首屏组件（如弹窗、二级页面）拆分为独立模块

  • 移除冗余依赖：

  • 检查 pubspec.yaml，删除未使用的包。

  • 使用 dependency_validator 工具扫描未使用的依赖：

  • flutter pub global activate dependency_validator

 使用

dart pub global run dependency_validator
2. 关键资源预加载

  • 预加载主 JS 和字体：
    在 web/index.html 的 <head> 中添加：

  • <link rel="preload" href="main.dart.js" as="script">
<link rel="preload" href="fonts/Roboto.woff2" as="font" type="font/woff2" crossorigin>

  •  预连接 CDN 或域名（如使用 CDN 托管 CanvasKit）：

  • <link rel="preconnect" href="https://unpkg.com">

3. 优化资源加载顺序

  • 延迟非关键资源：

    • 将统计脚本、广告 SDK 等移至页面底部或用 async/defer 加载：

    • <script src="analytics.js" defer></script>

    • 按需加载 CanvasKit（若必须使用）：

    • # 构建时指定 CDN 路径，避免打包到主资源
flutter build web --web-renderer canvaskit --dart-define=FLUTTER_WEB_CANVASKIT_URL=https://cdn.example.com/canvaskit/

二、渲染优化

1. 优先展示骨架屏

  • 添加 Loading 占位图：

    • 在 Flutter 初始化完成前，通过 HTML/CSS 显示一个简单的骨架屏：

    • <!-- web/index.html -->
<div id="skeleton" style="background: lightgray; width: 100%; height: 100vh;"></div>
<script>window.addEventListener('load', function() {document.getElementById('skeleton').style.display = 'none';});
</script>

2. 优化字体加载

  • 使用 font-display: swap：
    在 web/styles.css 中定义字体：

  • @font-face {font-family: 'CustomFont';src: url('fonts/CustomFont.woff2') format('woff2');font-display: swap;  /* 先显示备用字体，再替换 */
}

  • 子集化字体（仅保留必要字符）。

免布局抖动

  • 固定图片尺寸：

    • 为 Image 组件明确指定 width 和 height，避免浏览器重排：

  • Image.asset('assets/logo.png', width: 200, height: 100)

三、服务端优化

1. 启用 HTTP/2 和 Brotli 压缩

  • Nginx 配置示例：

  • server {listen 443 ssl http2;gzip on;gzip_types text/plain text/css application/json application/javascript;brotli on;  # 需要安装 Brotli 模块brotli_types text/plain text/css application/json application/javascript;
}

  • Brotli 比 Gzip 压缩率提高 20-30%。

2. CDN 加速静态资源

  • 将以下内容托管到 CDN：

    • main.dart.js

    • CanvasKit 文件（canvaskit.wasm、canvaskit.js）

    • 字体和图片

3. 缓存策略

  • 设置强缓存（Cache-Control: max-age=31536000）和哈希文件名：

  • <!-- 在构建流程中为文件名添加哈希 -->
<script src="main.dart.js?hash=abcd1234"></script>

四、深度优化技巧

1. 分析关键请求链

  • 使用 Chrome DevTools 的 Network 面板：

    • 过滤 initiator 为 parser 的请求（关键链请求）。

    • 优化最长任务（Long Tasks）和 TTI（Time to Interactive）。

2. Service Worker 缓存

  • 实现离线缓存和资源预加载：

// web/service-worker.js
self.addEventListener('install', (event) => {event.waitUntil(caches.open('v1').then((cache) => {return cache.addAll(['/', '/main.dart.js', '/styles.css']);}));
});

3. 动态加载渲染引擎

  • 根据设备能力动态选择渲染器：

  • // 在 web/index.html 中检测设备性能
if (isLowEndDevice) {window.flutterWebRenderer = "html";
} else {window.flutterWebRenderer = "canvaskit";
}

五、效果验证

优化项优化前 (3G 网络)优化后 (3G 网络)
首屏加载时间4.8s1.2s
LCP (最大内容渲染)5.1s1.5s
JS 总体积 (gzip)2.1MB680KB

操作步骤总结：

  1. 构建优化：启用 Release 模式，选择 HTML 渲染器，代码分割。

  2. 资源预加载：预加载主 JS、字体，预连接 CDN。

  3. 服务端加速：启用 HTTP/2 + Brotli，CDN 分发。

  4. 渲染策略：骨架屏、字体 swap、固定图片尺寸。

  5. 深度优化：Service Worker 缓存、动态渲染引擎。

通过以上步骤，首屏加载时间可减少 60-80%。最终效果取决于具体场景，建议使用 Lighthouse 和 WebPageTest 持续跟踪指标。

调试

看网络资源请求，按照耗时排序

先将有外网链接的资源 下载下来，替换成本地链接(不只是字体文件 还有client 文本文件，需要注意类型)

替换步骤是

1、将外网资源下载下来，放入模版web目录下(会自动拷贝到打包的web目录下)

2、根据找到的文件名，在打包产物全局搜索，替换为本地路径

搜索关键字

KFOmCnqEu92Fr1Me5WZLCzYlKw

accounts.google.com


http://www.ppmy.cn/server/179008.html

相关文章

网络安全工程师逆元计算 网络安全逆向

网络安全工程师逆元计算 网络安全逆向

中职网络安全逆向题目整理合集 逆向分析&#xff1a;PE01.exe算法破解&#xff1a;flag0072算法破解&#xff1a;flag0073算法破解&#xff1a;CrackMe.exe远程代码执行渗透测试天津逆向re1 re22023江苏省re12023年江苏省赛re2_easygo.exe2022天津市PWN 逆向分析&#xff1a;P…
阅读更多...
什么是网络准入？十种常见的网络准入解决方案分享！

什么是网络准入？十种常见的网络准入解决方案分享！

在数字化转型的浪潮中&#xff0c;企业网络的边界日益模糊&#xff0c;数据安全与访问控制成为了企业IT管理的核心挑战之一。OneNAC网络准入系统&#xff0c;作为新一代网络安全解决方案的佼佼者&#xff0c;凭借其强大的功能特性和灵活性&#xff0c;在众多网络准入控制&#…
阅读更多...
ngx_http_conf_port_t

ngx_http_conf_port_t

定义在 src\http\ngx_http_core_module.h typedef struct {ngx_int_t family;in_port_t port;ngx_array_t addrs; /* array of ngx_http_conf_addr_t */ } ngx_http_conf_port_t; 该结构体用于在 Nginx 配置阶段存储 监…
阅读更多...
【智能搜索引擎技术】第四章搜索引擎索引构建（水课复习自用）

【智能搜索引擎技术】第四章搜索引擎索引构建（水课复习自用）

一、倒排索引基础与结构 1.定义 倒排索引&#xff08;Inverted Index&#xff09;是搜索引擎的核心数据结构&#xff0c;主要用于记录文档集中单词与文档之间的映射关系。它的设计目的是为了提高搜索效率&#xff0c;使得搜索引擎能够快速定位包含用户查询词的文档&#xff0…
阅读更多...
【嵌入式学习2】内存管理

【嵌入式学习2】内存管理

## C语言编译过程 预处理&#xff1a;宏定义展开、头文件展开、条件编译&#xff0c;这里并不会检查语法&#xff0c;将#include #define这些头文件内容插入到源码中 gcc -E main.c -o main.i 编译&#xff1a;检查语法&#xff0c;将预处理后文件编译生成汇编文件&#xff…
阅读更多...
【2025】基于springboot+vue的校园创新创业竞赛平台设计与实现（源码、万字文档、图文修改、调试答疑）

【2025】基于springboot+vue的校园创新创业竞赛平台设计与实现（源码、万字文档、图文修改、调试答疑）

基于 Spring Boot Vue 的校园创新创业竞赛平台设计与实现 系统功能结构图如下&#xff1a; 一、课题背景 在当今时代&#xff0c;创新创业已成为推动社会发展的重要动力。校园创新创业竞赛作为培养大学生创新思维和创业实践能力的重要途径&#xff0c;受到了越来越多高校的重…
阅读更多...
【Linux学习笔记】gcc编辑器和动静态库的深度剖析

【Linux学习笔记】gcc编辑器和动静态库的深度剖析

【Linux学习笔记】gcc编辑器和动静态库的深度剖析 &#x1f525;个人主页&#xff1a;大白的编程日记 &#x1f525;专栏&#xff1a;Linux学习笔记 文章目录 【Linux学习笔记】gcc编辑器和动静态库的深度剖析前言一. 编译器gcc/g1.1背景知识1.2gcc编译选项1-2-1预处理(进行宏…
阅读更多...
什么是视图，数据库的视图本质上就是个提前写好的sql语句，创建的一个虚拟表

什么是视图，数据库的视图本质上就是个提前写好的sql语句，创建的一个虚拟表

是的&#xff0c;你的理解很准确&#xff01;视图本质上就是一个预先写好的、保存在数据库中的SQL查询语句&#xff0c;数据仍然是从数据库的实际表中获取的。下面我来详细解释一下&#xff1a; 视图的本质 • 保存的SQL查询&#xff1a;视图的定义是一个SQL查询语句。当你创建…
阅读更多...
最新文章

Copyright @ 2022~2023