CLI - 在 Angular 上為生產構建

Oluwafisayo Oluwatayo 2022年4月20日
CLI - 在 Angular 上為生產構建

在製作好 Web 應用程式並準備好部署後,我們要求 Angular 將所有不同的程式碼片段編譯到一個構建中。構建被壓縮成更小的尺寸。

在這最後一步中,我們必然會遇到一些小問題。考慮到構建應用程式所經歷的嚴酷考驗,這可能是一種令人沮喪的體驗。

很容易認為這是一個孤立的問題,但即使是未被篡改的新專案也會遇到同樣的問題。遇到的一個主要問題是沒有建立 main.js。然後會有其他警告,例如:

  1. 刪​​除未使用的功能。
  2. 初始化中的站點效應。

如何解決 CLI - 構建問題

在我們深入研究不同的工作解決方案之前,讓我們看看 Angular 的不同標誌設定:

# Prod these are equivalent
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod

# Dev and so are these
ng build --target=development --environment=dev
ng build --dev --env=dev
ng build --dev
ng build

在 Angular 中使用 --prod 時,它會設定一些不可標記的設定:

  1. 如果在 .angular-cli.json 中配置,則新增 service worker。
  2. production 值替換模組中的 process.env.NODE_ENV(這對於某些庫是必需的,例如 react)。
  3. 在程式碼上執行 UglifyJS。

在構建專案時,諸如 ng build --env=prod 之類的命令無法完成出色的構建生產工作,因為它們不會壓縮檔案。要記住的另一件事是確認已實施 AOT。預設情況下,AOT 主要是活動的。

如果實施了提前 (AOT),則 ng build --prod 命令應該可以工作。如果它不起作用,請使用 ng build --prod --aot=false 命令。

如果在 Angular 中啟用了啟用生產功能,則 ng serve --prod 命令也可以工作。此命令還有助於顯著加快應用載入時間。

Oluwafisayo Oluwatayo avatar Oluwafisayo Oluwatayo avatar

Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.

LinkedIn