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