CLI - 在 Angular 上為生產構建
Oluwafisayo Oluwatayo
2022年4月20日
在製作好 Web 應用程式並準備好部署後,我們要求 Angular 將所有不同的程式碼片段編譯到一個構建中。構建被壓縮成更小的尺寸。
在這最後一步中,我們必然會遇到一些小問題。考慮到構建應用程式所經歷的嚴酷考驗,這可能是一種令人沮喪的體驗。
很容易認為這是一個孤立的問題,但即使是未被篡改的新專案也會遇到同樣的問題。遇到的一個主要問題是沒有建立 main.js
。然後會有其他警告,例如:
- 刪除未使用的功能。
- 初始化中的站點效應。
如何解決 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
時,它會設定一些不可標記的設定:
- 如果在
.angular-cli.json
中配置,則新增 service worker。 - 用
production
值替換模組中的process.env.NODE_ENV
(這對於某些庫是必需的,例如 react)。 - 在程式碼上執行 UglifyJS。
在構建專案時,諸如 ng build --env=prod
之類的命令無法完成出色的構建生產工作,因為它們不會壓縮檔案。要記住的另一件事是確認已實施 AOT。預設情況下,AOT 主要是活動的。
如果實施了提前 (AOT),則 ng build --prod
命令應該可以工作。如果它不起作用,請使用 ng build --prod --aot=false
命令。
如果在 Angular 中啟用了啟用生產功能,則 ng serve --prod
命令也可以工作。此命令還有助於顯著加快應用載入時間。
Author: Oluwafisayo Oluwatayo
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