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