构建并发布 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 示例为例）以查看应用的发布版本。

你可能需要部署性能分析构建或调试构建以进行测试。为此，请向 flutter build web 命令传递 --profile 或 --debug 标志。性能分析构建专门用于使用 Chrome DevTools 进行性能分析，而调试构建可用于配置 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. 为支持框架的 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 上显示图片。

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

请参阅嵌入 Flutter Web。