构建并发布 Web 应用

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

本页面将帮助你准备应用的发布（release）版本，并涵盖以下主题：

• 构建用于发布的应用程序
• 部署到 Web
• 部署到 Firebase Hosting
• 在 Web 上处理图像
• 选择构建模式和渲染器
• 代码压缩（Minification）

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

flutter build web

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

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

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

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

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

准备好部署应用后，请将发布包上传到 Firebase、云端或类似服务。以下是一些方案，当然还有许多其他选择：

• Firebase Hosting
• GitHub Pages
• Google Cloud Hosting

你可以使用 Firebase CLI 构建 Flutter 应用并将其发布到 Firebase Hosting。

首先，安装或更新 Firebase CLI。

npm install -g firebase-tools

1. 启用 Web 框架预览，以使用 Firebase 框架感知 CLI。

   firebase experiments:enable webframeworks
   

   content_copy

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

   firebase init hosting
   

   content_copy

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

4. 如果你处于空目录中，系统会要求你选择 Web 框架。请选择 Flutter Web。

5. 选择你的托管源目录；这可以是现有的 Flutter 应用。

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

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

8. 将应用部署到 Firebase Hosting

   firebase deploy
   

   content_copy

   运行此命令会自动执行 flutter build web --release，因此你无需在单独的步骤中构建应用。

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

Web 支持使用标准的 Image 组件显示图像。根据设计，Web 浏览器会在不损害宿主计算机的情况下运行不可信代码。与移动端和桌面平台相比，这限制了你在图像处理方面的操作。

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

为了提高应用启动速度，编译器会通过移除未使用的代码（称为摇树优化/tree shaking）以及将代码符号重命名为更短的字符串（例如将 AlignmentGeometryTween 重命名为类似 ab 的名称）来减小编译后的代码大小。应用哪种优化取决于构建模式：

请参阅 嵌入 Flutter Web。