flutter 开发web端的性能优化

发布于：2025-03-25 ⋅ 阅读:(20) ⋅ 点赞:(0)

参考资料

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.8s 1.2s
LCP (最大内容渲染) 5.1s 1.5s
JS 总体积 (gzip) 2.1MB 680KB

操作步骤总结：

  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

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布