프로덕션용 Angular 앱 번들

1. Angular CLI를 사용하여 프로덕션용 Angular 앱 번들링
2. Webpack을 사용하여 프로덕션용 Angular 앱 번들링
3. Gulp를 사용하여 프로덕션용 Angular 앱 번들
4. 결론

이 기사에서는 앱을 성공적으로 생성한 후 배포용 Angular 애플리케이션을 빌드하는 다양한 방법을 보여줍니다.

계속해서 앱을 빌드하기 전에 ng serve --prod를 사용하여 앱을 실행하는 것이 이상적입니다. 그런 다음 http://localhost:4200/ URL로 이동하여 앱 실행을 확인하고 여기에서 애플리케이션의 동작을 관찰할 수 있습니다.

이제 Angular 애플리케이션을 묶는 다양한 방법을 살펴보겠습니다.

Angular CLI를 사용하여 프로덕션용 Angular 앱 번들링

이 방법은 Angular의 모든 버전에서 작동하므로 Angular 애플리케이션을 번들로 묶는 데 가장 널리 사용되는 방법입니다. CLI를 사용하면 개발자가 빌드 프로세스 중에 골치 아픈 문제를 덜 수 있습니다.

CLI 방법은 Ahead of Time Compilation을 사용하도록 프로젝트를 조정하려는 개발자에게 가장 좋은 방법입니다.

먼저 Angular 애플리케이션에 CLI를 설치해야 합니다. 터미널을 열고 npm install -g @angular/cli를 입력하고 Enter 키를 누릅니다.

완전히 설치된 후 새 폴더로 이동하고 ng new newApp을 입력하여 새 응용 프로그램을 만듭니다. 따라서 이 폴더로 이동하여 앱 빌드를 시작합니다.

앱을 개발하면 ng build를 입력하여 앱을 번들로 제공합니다.

일반적으로 번들 앱을 압축하는 데 이상적입니다. 이렇게 하면 앱이 더 빠르게 로드되고 일반적으로 효율적으로 작동하기 때문입니다.

Brotli 압축을 사용하여 압축할 수 있습니다. 터미널을 열고 다음을 입력합니다. for i in dist/*/*; do brotli $i.

그런 다음 Angular와 Angular CLI를 번들로 묶었습니다.

Webpack을 사용하여 프로덕션용 Angular 앱 번들링

webpack 방식은 종종 강력한 모듈 번들러로 간주됩니다. 빌드된 앱의 소스 코드를 모니터링하고 import 문을 찾습니다.

두 개의 종속성 그래프를 개발한 다음 애플리케이션에 대한 두 개의 번들 파일을 릴리스합니다. 하나는 애플리케이션 코드만 포함하는 app.js이고 다른 하나는 모든 공급업체 종속성을 포함하는 vendor.js 파일입니다.

웹팩을 설치하려면 먼저 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 애플리케이션을 묶는 또 다른 강력한 도구입니다. 복잡하고 대규모 프로젝트를 빌드하는 데 더 효율적이기 때문입니다. 또한 자동화할 수 있는 꿀꺽 빌드 프로세스의 일부가 있어 워크플로를 덜 번거롭게 만듭니다.

먼저 새 프로젝트를 생성합니다. 폴더 내부로 이동하여 $npm install gulp를 사용하여 터미널에서 gulp를 설치합니다.

프로젝트 폴더에 gulpfile.js 파일을 만들고 app/views 폴더의 모든 HTML 파일을 dist 폴더로 복사합니다. 그런 다음 터미널에서 $gulp copy-html-files를 실행합니다.

개발자는 꿀꺽꿀꺽 빌드와 관련된 모든 작업을 실행할 필요가 없습니다. $npm install gulp-run-sequence를 설치해야 합니다. gulpfile.js의 여러 작업을 터미널에서 실행할 수 있습니다.

프로젝트가 완전히 준비되면 $gulp build를 실행합니다.

버전 관리 전에 dist 폴더에서 일부 콘텐츠를 제거하거나 개발자가 이전 파일을 지우고 새 파일을 삽입하려는 경우 수행해야 하는 모든 작업은 npm install gulp-clean을 입력하기만 하면 됩니다. 터미널에서.

gulp를 사용하여 Angular 앱을 빌드하는 데 필요한 단계가 상당히 복잡하다는 점을 고려하면 이 프로세스를 자동화할 수 있습니다. npm install gulp-watch를 설치합니다. 이것은 파일을 변경할 때마다 실행 순서에 정의된 모든 명령을 다시 실행합니다.

결론

Angular에서 앱을 최적으로 빌드하는 다양한 방법이 있습니다. 채택된 방법은 주로 우리가 구축하려는 프로젝트의 종류, 시간 및 경험에 따라 다릅니다.