捆绑用于生产的 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