FlutterJS – 运行 Flutter 代码，获取语义化 HTML 输出
1 分•作者: flutterjs•24 天前
嘿，Hacker News！我是 FlutterJS 的开发者。
问题：Flutter Web 擅长构建应用，但对于网站来说却很糟糕。它将所有内容渲染到 Canvas/WASM，这意味着：
* 2-5 MB 的打包体积（在移动端很慢）
* 零 SEO——谷歌无法索引 Canvas 像素
* 糟糕的无障碍性（屏幕阅读器没有语义 HTML）
* 3-8 秒的初始加载时间
如果你曾经尝试用 Flutter Web 构建营销网站或博客，你肯定会遇到这个问题。
解决方案：FlutterJS 将你的 Flutter/Dart 代码编译成语义 HTML + CSS + JavaScript，而不是 Canvas。使用你已经熟悉的 Flutter 语法，但输出结果是：
* ~50-100 KB 的打包体积（缩小 50 倍）
* 完全的 SEO 支持（真实的 HTML 元素）
* 首次渲染时间小于 1 秒
* 默认可访问
工作原理：
1. 你编写普通的 Flutter/Dart 代码
2. 我们的 Dart CLI 分析你的 AST 并生成中间表示（IR）
3. IR 被转译为 JavaScript，并附带一个轻量级的运行时
4. 输出是搜索引擎可以索引的语义 HTML
当前状态：Beta（v0.9.x）。我们支持最常见的 Material 组件（Scaffold、AppBar、Text、Button、Row、Column、StatefulWidget 等）。动画支持和完整的 Material 3 正在开发中。
已知限制：
* 并非所有 Flutter 组件都已实现（请参阅 README 中的兼容性矩阵）
* 方法拆分目前需要用 lambda 表达式包装
* 暂不支持复杂的动画
* 这最适合内容丰富的网站，而不是图形密集型应用
我为什么构建它：我一直遇到喜欢 Flutter 的 DX 但需要他们的网站在谷歌上排名的客户。Flutter Web 无法做到这一点。我想要两全其美。
我很乐意听取你的反馈，特别是：
* 你是否在使用 Flutter Web 时遇到了 SEO 问题？
* 你的用例需要哪些组件？
* 你对这种方法有什么担忧吗？
欢迎提问关于架构、性能主张或路线图的问题！
查看原文
Hey HN! I'm the creator of FlutterJS.
The Problem: Flutter Web is great for building apps, but terrible for websites. It renders everything to Canvas/WASM, which means:
2-5 MB bundles (slow on mobile)
Zero SEO – Google can't index canvas pixels
Poor accessibility (no semantic HTML for screen readers)
3-8 second initial load times
If you've ever tried to build a marketing site or blog with Flutter Web, you've hit this wall.
The Solution: FlutterJS compiles your Flutter/Dart code to semantic HTML + CSS + JavaScript instead of Canvas. Same Flutter syntax you already know, but the output is:
~50-100 KB bundles (50x smaller)
Full SEO support (real HTML elements)
Sub-1-second first paint
Accessible by default
How it works:
You write normal Flutter/Dart code
Our Dart CLI analyzes your AST and generates an Intermediate Representation (IR)
The IR gets transpiled to JavaScript with a lightweight runtime
Output is semantic HTML that search engines can index<p>Current Status: Beta (v0.9.x). We support the most common Material widgets (Scaffold, AppBar, Text, Button, Row, Column, StatefulWidget, etc.). Animation support and full Material 3 are on the roadmap.
Known Limitations:
Not all Flutter widgets are implemented yet (see compatibility matrix in README)
Method tear-offs need wrapping in lambdas for now
Complex animations aren't supported yet
This is best for content-heavy sites, not graphics-intensive apps
Why I built this: I kept running into clients who loved Flutter's DX but needed their sites to rank on Google. Flutter Web couldn't do that. I wanted the best of both worlds.
I'd love your feedback, especially:
Have you hit this SEO wall with Flutter Web?
What widgets would you need for your use case?
Any concerns about the approach?
Happy to answer questions about the architecture, performance claims, or roadmap!