品牌网站建设顾问网站推广多少钱
参考资料
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
deferred_helper | Flutter packageA plugin to help manage deferred content of a flutter ap
https://pub.dev/packages/deferred_helper
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和skwasmflutter build web --release --web-renderer skwasm -
仅打包首屏必要代码：
-
使用路由懒加载（如
AutoRoute或手动import()）。 -
将非首屏组件（如弹窗、二级页面）拆分为独立模块
-
-
移除冗余依赖：
-
检查
pubspec.yaml，删除未使用的包。 -
使用
dependency_validator工具扫描未使用的依赖： -
flutter pub global activate dependency_validator
使用
dart pub global run dependency_validator2. 关键资源预加载
-
预加载主 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 |
操作步骤总结：
-
构建优化：启用 Release 模式，选择 HTML 渲染器，代码分割。
-
资源预加载：预加载主 JS、字体，预连接 CDN。
-
服务端加速：启用 HTTP/2 + Brotli，CDN 分发。
-
渲染策略：骨架屏、字体
swap、固定图片尺寸。 -
深度优化：Service Worker 缓存、动态渲染引擎。
通过以上步骤，首屏加载时间可减少 60-80%。最终效果取决于具体场景，建议使用 Lighthouse 和 WebPageTest 持续跟踪指标。
调试
看网络资源请求，按照耗时排序
先将有外网链接的资源 下载下来，替换成本地链接(不只是字体文件 还有client 文本文件，需要注意类型)
替换步骤是
1、将外网资源下载下来，放入模版web目录下(会自动拷贝到打包的web目录下)
2、根据找到的文件名，在打包产物全局搜索，替换为本地路径
搜索关键字
KFOmCnqEu92Fr1Me5WZLCzYlKw
accounts.google.com