Flutter - 使用本地 DevTools 验证 SVG 加载优化

欢迎关注微信公众号：FSA全栈行动 👋

一、背景

在 Medium 上看到一篇 SVG 加载优化的文章，于是我打算着手试试并验证。

文章链接: medium.com/software-ge...

文中是通过 raster stats 进行验证的，但是 DevTools 自 2.37.2 版本起移除了 raster stats～

详细说明可看: docs.flutter.dev/tools/devto...

注：其实在源码中是从 2.37.0 开始就被移除了的，只是正式发布的 2.37.x 版本为 2.37.2，所以官方文档里写的是 2.37.2 这个版本～

移除的原因是 raster stats 对 Impeller 渲染引擎不起作用，但是 Impeller 在安卓上不稳定，所以我们安卓端目前还是使用的 Skia，所以我打算指定使用本地旧的 DevTools 来进行验证。

当然了，新建项目并使用旧的 Flutter 版本也可以，我这里更多的是为了尝试指定本地 DevTools～

如果你有除 raster stats 的其它验证方式，欢迎留言跟大家分享。

二、SVG 加载优化

pubspec.yaml

yaml 复制代码

dependencies:
  vector_graphics: any

dev_dependencies:
  vector_graphics_compiler: any
  
flutter:
  assets:
    # 旧的
    # - assets/svg/
    # 新的
    - path: assets/svg/
      transformers:
        - package: vector_graphics_compiler

之前的 SvgPicture 的加载方式

dart 复制代码

SvgPicture.asset(
  'assets/svg/Chat-bot-cuate.svg',
  width: 300,
  height: 300,
),

调整为 VectorGraphic 去加载

dart 复制代码

child: const VectorGraphic(
  loader: AssetBytesLoader('assets/svg/Chat-bot-cuate.svg'),
  width: 300,
  height: 300,
),

这里需要注意一下，assets/svg/ 目录加上 transformers 后 SvgPicture.asset 就无法正常加载咯，如果不能一次性迁移调整，建议新增个子目录去处理。

SVG 的加载优化就搞定了，接下来讲讲如何指定使用本地旧的 DevTools 来进行验证。

三、使用本地 `DevTools`

1、拉源码

DevTools

shell 复制代码

git clone https://github.com/flutter/devtools.git

切到你想要使用的版本 tag

shell 复制代码

git checkout v2.36.0

Dart

这里看你使用的 Flutter 的版本情况，我当前是 3.24.5，对应的 Dart 版本为 3.6.2

shell 复制代码

git clone https://github.com/dart-lang/sdk.git

切到你想要使用的版本 tag

shell 复制代码

git checkout 3.6.2

2、调整项目配置

这里以 VSCode 为例，打开 .vscode/settings.json，添加如下配置

json 复制代码

{
    // Flutter SDK 路径
    "dart.flutterSdkPath": "/Users/lxf/fvm/versions/3.24.5",
    // 使用自定义 DevTools
    "dart.customDevTools": {
        "path": "/path/to/devtools",
        "env": {
            // Dart 源码路径
            "LOCAL_DART_SDK": "/path/to/dart-lang/sdk",
            // Flutter 源码路径
            "FLUTTER_ROOT": "/Users/lxf/fvm/versions/3.24.5"
        }
    },
    // devTools 日志文件路径
    "dart.devToolsLogFile": "/path/to/devtools/lxf_devtools_log.txt",
}

注意，配置完成后，需重启 VSCode，或者执行 VSCode 的 Developer: Reload Window 方可生效。

重启后右下角会看到 Starting Custom Dart DevTools...，并且在项目的根目录下会生成对应的 lxf_devtools_log.txt 日志文件。

日志文件的内容大致如下

less 复制代码

!! ⚠️ PLEASE REVIEW THIS LOG FOR SENSITIVE INFORMATION BEFORE SHARING ⚠️ !!
Dart Code extension: 3.114.2
Flutter extension: 3.114.0 (not activated)

App: Visual Studio Code
App Host: desktop
Version: mac 1.102.2


Logging Categories:
    DevTools

Thu Jul 26 2025 [17:28:45 GMT+0800 (中国标准时间)] Log file started
[17:28:47] [DevTools] [Info] Spawning /path/to/devtools/tool/bin/dt with args ["serve","--machine","--allow-embedding","--dtd-uri","ws://127.0.0.1:58813/3Td7Xo9WUO0gDIm7"]
...

本地 DevTools 启动失败时长这个样子：

css 复制代码

Thu Jul 26 2025 [17:28:45 GMT+0800 (中国标准时间)] Log file started
[17:28:47] [DevTools] [Info] Spawning /path/to/devtools/tool/bin/dt with args ["serve","--machine","--allow-embedding","--dtd-uri","ws://127.0.0.1:58813/3Td7Xo9WUO0gDIm7"]
[DevTools] [Info] ..  in /path/to/devtools
[DevTools] [Info] ..  with {"toolEnv":{"FLUTTER_HOST":"VSCode","PUB_ENVIRONMENT":"vscode.dart-code","FLUTTER_ROOT":"/Users/lxf/fvm/versions/3.24.5"}}
[DevTools] [Info]     PID: 74050
[DevTools] [Info] Process errored! Error: spawn /path/to/devtools/tool/bin/dt ENOENT
[General] [Error] Dart DevTools exited with code -2.

遇到 Error: spawn /path/to/devtools/tool/bin/dt ENOENT 这个错误是因为本地使用的 devtools 比较旧，没有 dt 那些文件，其实就是原来的 devtools_tool 那些文件，将 devtools/tool/bin 下的三个文件名为 devtools_tool 的文件复制粘贴，并重命名为 dt 即可。

完成后再次 Developer: Reload Window 即可，首次启动本地 DevTools 时会去拉源码和安装依赖，时间上会稍久一些。

csharp 复制代码

Thu Jul 24 2025 [17:56:46 GMT+0800 (中国标准时间)] Log file started
[17:56:48] [DevTools] [Info] Spawning /path/to/devtools/tool/bin/dt with args ["serve","--machine","--allow-embedding","--dtd-uri","ws://127.0.0.1:50090/8LqnJWrdN5p7ayst"]
[DevTools] [Info] ..  in /path/to/devtools
[DevTools] [Info] ..  with {"toolEnv":{"FLUTTER_HOST":"VSCode","PUB_ENVIRONMENT":"vscode.dart-code","FLUTTER_ROOT":"/Users/lxf/fvm/versions/3.24.5"},"envOverrides":{"FLUTTER_ROOT":"/Users/lxf/fvm/versions/3.24.5"}}
[DevTools] [Info]     PID: 13860
[DevTools] [Info] <== Running devtools_tool using the Dart SDK from /Users/lxf/fvm/default/bin/dart to create the Flutter SDK in tool/flutter-sdk.
[DevTools] [Info] <== Using Flutter SDK from /Users/lxf/fvm/versions/3.27.4
[DevTools] [Info] <== Updating to Flutter version from cache: tags/3.23.0-13.0.pre
[DevTools] [Info] <== Cloning Flutter into /path/to/devtools/tool/flutter-sdk
[DevTools] [Info] <== /path/to/devtools/tool > git clone https://github.com/flutter/flutter flutter-sdk

成功运行时会输出如下日志

css 复制代码

[DevTools] [Info] <== [serve] serving DevTools with a local devtools server...
[DevTools] [Info] <== /path/to/dart-lang/sdk > /path/to/devtools/tool/flutter-sdk/bin/dart pkg/dds/tool/devtools_server/serve_local.dart --devtools-build=/path/to/devtools/packages/devtools_app/build/web --machine --allow-embedding --dtd-uri ws://127.0.0.1:54232/lOgRLna5Xl4Uhu7v
[DevTools] [Info] <== {"event":"server.started","method":"server.started","params":{"host":"127.0.0.1","port":9103,"pid":76659,"protocolVersion":"1.2.0"}}
[DevTools] [Info] ==> {"id":"1","method":"vscode.extensions.discover","params":{"rootPaths":["/path/to/flutter_test_demo"]}}
[DevTools] [Info] <== {"id":"1","result":{"/path/to/flutter_test_demo":{"extensions":[],"parseErrors":[]}}}

Open DevTools in Web Browser，点击右上角的问号验证一下版本号是否正确

四、验证

第三方库	渲染时间(ms)	平均帧率(FPS)
flutter_svg	50	68
vector_graphics	5.1	88

可以看到，使用 vector_graphics 来加载 SVG ，在渲染时间和平均帧率上确实是有很不错的提升的，验证大成功～

如果文章对您有所帮助, 请不吝点击关注一下我的微信公众号：FSA全栈行动, 这将是对我最大的激励. 公众号不仅有 iOS 技术，还有 Android，Flutter，Python 等文章, 可能有你想要了解的技能知识点哦~

Flutter - 使用本地 DevTools 验证 SVG 加载优化

一、背景

二、SVG 加载优化

三、使用本地 DevTools

1、拉源码

DevTools

Dart

2、调整项目配置

四、验证

三、使用本地 `DevTools`