構建併發布 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 構建進行測試。 為此，將 --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，因此您無需單獨構建應用程式。

要了解更多資訊，請訪問官方 Firebase Hosting 文件，瞭解 Web 上的 Flutter。

Web 支援標準的 Image 元件來顯示影像。 預設情況下，Web 瀏覽器執行不受信任的程式碼，而不會損害主機計算機。 這限制了與移動和桌面平臺相比，您可以使用影像的方式。

有關更多資訊，請參閱 在 Web 上顯示影像。

為了提高應用程式啟動速度，編譯器透過刪除未使用的程式碼（稱為tree shaking）以及將程式碼符號重新命名為較短的字串（例如，將 AlignmentGeometryTween 重新命名為類似 ab 的名稱）來減小編譯程式碼的大小。 應用哪種最佳化取決於構建模式

參見 嵌入 Flutter web。