捆綁用於生產的 Angular 應用程式

Oluwafisayo Oluwatayo 2023年1月30日 2022年4月20日
  1. 使用 Angular CLI 捆綁用於生產的 Angular 應用程式
  2. 使用 Webpack 捆綁 Angular 應用程式進行生產
  3. 使用 Gulp 捆綁 Angular 應用程式進行生產
  4. まとめ
捆綁用於生產的 Angular 應用程式

本文將演示在成功建立應用程式後構建用於部署的 Angular 應用程式的不同方法。

在我們繼續構建應用程式之前,使用 ng serve --prod 執行應用程式是理想的;然後我們繼續訪問這個 URL:http://localhost:4200/ 來檢視應用程式的執行情況,從這裡我們可以觀察應用程式的執行行為。

現在讓我們看看捆綁 Angular 應用程式的不同方法。

使用 Angular CLI 捆綁用於生產的 Angular 應用程式

此方法是捆綁 Angular 應用程式最廣泛接受的方法,因為它適用於所有版本的 Angular。CLI 在構建過程中減少了開發人員的麻煩。

對於想要調整專案以使用 Ahead of Time Compilation 的開發人員來說,CLI 方法是你的最佳選擇。

首先,需要將 CLI 安裝到我們的 Angular 應用程式中;我們開啟終端,輸入 npm install -g @angular/cli,然後按 Enter。

完全安裝後,我們進入一個新資料夾,並通過鍵入 ng new newApp 建立一個新應用程式。所以我們繼續到這個資料夾開始構建我們的應用程式。

一旦我們開發了我們的應用程式,我們通過輸入 ng build 來捆綁應用程式。

它通常是壓縮捆綁應用程式的理想選擇,因為這使應用程式載入速度更快並且通常可以高效執行。

我們可以使用 Brotli 壓縮排行壓縮。我們開啟終端並輸入:for i in dist/*/*;做 brotli $i

然後,我們完成了將 Angular 與 Angular CLI 捆綁在一起。

使用 Webpack 捆綁 Angular 應用程式進行生產

webpack 方法通常被認為是一個強大的模組打包器。它監控已構建應用程式的原始碼並查詢 import 語句。

它開發了兩個依賴關係圖,然後為應用程式釋出了兩個捆綁檔案。一個是 app.js,僅包含應用程式程式碼,另一個稱為 vendor.js 檔案,其中包含所有供應商依賴項。

要安裝 webpack,我們首先建立一個名為 angular-webpack 的新專案資料夾,我們 cd 進入該檔案,建立一個名為 package.json 的檔案,並在其中複製以下程式碼。

程式碼片段(package.json):

{
  "name": "angular2-webpack",
  "version": "1.0.0",
  "description": "A webpack starter for Angular",
  "scripts": {
    "start": "webpack-dev-server --inline --progress --port 8080",
    "test": "karma start",
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
  },
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~4.2.0",
    "@angular/compiler": "~4.2.0",
    "@angular/core": "~4.2.0",
    "@angular/forms": "~4.2.0",
    "@angular/http": "~4.2.0",
    "@angular/platform-browser": "~4.2.0",
    "@angular/platform-browser-dynamic": "~4.2.0",
    "@angular/router": "~4.2.0",
    "core-js": "^2.4.1",
    "rxjs": "5.0.1",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@types/node": "^6.0.45",
    "@types/jasmine": "2.5.36",
    "angular2-template-loader": "^0.6.0",
    "awesome-typescript-loader": "^3.0.4",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "2.0.0-beta.5",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.16.1",
    "jasmine-core": "^2.4.1",
    "karma": "^1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.1",
    "null-loader": "^0.1.1",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.2",
    "style-loader": "^0.13.1",
    "typescript": "~2.3.1",
    "webpack": "2.2.1",
    "webpack-dev-server": "2.4.1",
    "webpack-merge": "^3.0.0"
  }
}

接下來,我們開啟一個終端並使用 npm install 安裝這些軟體包。專案完成後,我們執行 ng build 命令。

使用 Gulp 捆綁 Angular 應用程式進行生產

Gulp 是在 Angular 2 框架上捆綁 Angular 應用程式的另一個強大工具,因為它更有效地構建複雜的大型專案。此外,gulp 構建過程的某些部分可以自動化,從而減少工作流程的繁瑣。

首先,我們將建立一個新專案;我們進入資料夾並從終端安裝 gulp,使用 $npm install gulp

我們在專案資料夾中建立一個 gulpfile.js 檔案,並將所有 HTML 檔案從 app/views 資料夾複製到 dist 資料夾。然後我們從終端執行 $gulp copy-html-files

開發人員不需要執行 gulp build 中涉及的所有任務;需要安裝 $npm install gulp-run-sequence。它允許從終端執行 gulpfile.js 中的多個任務。

當我們的專案完全準備好時,我們執行 $gulp build

如果我們想從 dist 資料夾中刪除一些內容,可能是在版本控制之前,或者開發人員想要刪除以前的檔案並注入新檔案,只需在終端輸入:npm install gulp-clean

考慮到使用 gulp 構建 Angular 應用程式所需的步驟非常有彈性,我們可以自動化這個過程。我們安裝 npm install gulp-watch;每次我們更改檔案時,這將重新執行執行序列中定義的任何命令。

まとめ

有多種方法可以優化地在 Angular 上構建應用程式;採用的方法主要取決於我們嘗試構建的專案型別、時間和經驗。

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