构建并发布 Web 应用

在典型的开发周期中，您通常在命令行中使用 flutter run -d chrome（例如）来测试应用。这会构建一个应用的调试版本。

本文档将帮助您准备应用的发布版本，并涵盖以下主题：

• 为发布构建应用
• 部署到 Web
• 部署到 Firebase Hosting
• 处理 Web 上的图像
• 选择构建模式和渲染器
• 代码压缩

使用 flutter build web 命令构建用于部署的应用。

flutter build web

这将生成应用，包括资源，并将文件放置在项目中的 /build/web 目录中。

要验证您应用的发布构建，请启动一个 Web 服务器（例如，使用 python -m http.server 8000，或使用 dhttpd 包），然后打开 /build/web 目录。在浏览器中导航到 localhost:8000（以 Python SimpleHTTPServer 示例为例）即可查看应用的发布版本。

您可能需要部署性能分析或调试版本进行测试。为此，请将 --profile 或 --debug 标志传递给 flutter build web 命令。性能分析构建专门用于使用 Chrome DevTools 进行性能分析，而调试构建可用于配置 dart2js 以遵守断言并更改优化级别（使用 -O 标志）。

Flutter Web 提供两种构建模式（默认模式和 WebAssembly）和两种渲染器（canvaskit 和 skwasm）。

有关更多信息，请参阅 Web 渲染器。

当您准备好部署应用时，请将发布包上传到 Firebase、云或其他类似服务。以下是一些可能性，但还有许多其他选择：

• Firebase Hosting
• GitHub Pages
• Google Cloud Hosting

您可以使用 Firebase CLI 通过 Firebase Hosting 来构建和发布您的 Flutter 应用。

开始之前，请 安装或更新 Firebase CLI。

npm install -g firebase-tools

1. 为 Firebase 框架感知 CLI 启用 Web 框架预览。

   firebase experiments:enable webframeworks

2. 在空目录或现有 Flutter 项目中，运行初始化命令：

   firebase init hosting

3. 当被问及是否要使用 Web 框架时，回答 yes。

4. 如果您在一个空目录中，系统会要求您选择 Web 框架。请选择 Flutter Web。

5. 选择您的托管源目录；这可能是一个现有的 Flutter 应用。

6. 选择一个区域来托管您的文件。

7. 选择是否通过 GitHub 设置自动构建和部署。

8. 部署应用到 Firebase Hosting

   firebase deploy

   运行此命令会自动执行 flutter build web --release，因此您无需单独构建应用。

要了解更多信息，请访问 Flutter Web 上的官方 Firebase Hosting 文档。

Web 支持标准的 Image 小部件来显示图像。根据设计，Web 浏览器在不损害主机计算机的情况下运行不受信任的代码。这限制了您处理图像的方式，与移动和桌面平台相比。

有关更多信息，请参阅 在 Web 上显示图像。

为了提高应用启动速度，编译器通过移除未使用的代码（称为摇树优化），并为代码符号重命名为更短的字符串（例如，将 AlignmentGeometryTween 重命名为 ab）来减小编译后代码的大小。这两种优化措施是否应用取决于构建模式：

请参阅 嵌入 Flutter Web。