捆綁用於生產的 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 上構建應用程式;採用的方法主要取決於我們嘗試構建的專案型別、時間和經驗。
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