構建併發布 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。