web-dev-qa-db-ja.com

最適化を正しくビルドする方法Angular 5プロジェクト？

私はAngular 5プロジェクトに初めて参加しました。_ng build --prod_を実行して_dist/_フォルダーを生成しました。

ビルドにはかなり長い時間がかかることに気付き、_dist/_フォルダーを開くと、SVGや画像など、ほぼ98％の無駄なものがそこにあることがわかりました。

_dist/_の内容を制御するにはどうすればよいですか？

。angular-cli.json

_{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "web"
  },
  "apps": [{
    "root": "src",
    "outDir": "dist",
    "assets": [
      "assets",
      "favicon.ico"
    ],
    "index": "index.html",
    "main": "main.ts",
    "polyfills": "polyfills.ts",
    "test": "test.ts",
    "tsconfig": "tsconfig.app.json",
    "testTsconfig": "tsconfig.spec.json",
    "prefix": "app",
    "styles": [
      "styles.css",
      "../node_modules/bootstrap/dist/css/bootstrap.min.css",
      "../node_modules/ngx-toastr/toastr.css",
      "../src/assets/css/style.css",
      "../src/assets/css/colors/blue.css"

    ],
    "scripts": [
      "../node_modules/jquery/dist/jquery.min.js",
      "../node_modules/popper.js/dist/umd/popper.min.js",
      "../node_modules/bootstrap/dist/js/bootstrap.min.js",
      "../node_modules/jquery-slimscroll/jquery.slimscroll.min.js",
      "../node_modules/pace-js/pace.min.js"
    ],
    "environmentSource": "environments/environment.ts",
    "environments": {
      "dev": "environments/environment.ts",
      "prod": "environments/environment.prod.ts"
    }
  }],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [{
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}
_

package.json

_{
  "name": "web",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 4202",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "5.1.0",
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@angular/router": "5.0.3",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.5",
    "@ngx-translate/core": "8.0.0",
    "@types/jquery": "3.2.16",
    "angular2-image-upload": "^1.0.0-rc.0",
    "bootstrap": "4.0.0-beta.2",
    "core-js": "2.4.1",
    "jquery": "3.2.1",
    "jquery-slimscroll": "1.3.8",
    "ngx-toastr": "8.0.0",
    "ngx-uploader": "4.2.1",
    "pace-js": "1.0.2",
    "popper.js": "1.13.0",
    "rxjs": "5.5.0",
    "sticky-kit": "1.1.3",
    "zone.js": "0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.4",
    "@angular/compiler-cli": "5.0.3",
    "@angular/language-service": "5.0.3",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "TypeScript": "~2.4.2"
  }
}
_

どうすればoptimize it？そして、私のサイトに必要なものだけを構築しますか？

現在、サーバーでビルドするには15分かかります。ビルドを高速化するにはどうすればよいですか？

javascriptangularwebpackangular-cliangular5
14
kyo

ビルドが遅い場合は、このバージョンのangular cli：を使用できます。

"@angular/cli": "1.7.0-beta.0",

これにより、構築時間が30分から3分に短縮されました。

In Angular 5、AOTおよびbuild-optimizerはデフォルトでprodビルドにあります。

ng build --prod --named-chunks --named-chunksをビルドコマンドに追加すると、名前付きチャンクが得られるので、チャンクをよりよく分析し、各モジュールにインポートするものをより強化できます。共有モジュール全体を特定のモジュールにインポートしているときに、その共有モジュールから1つだけを使用する場合の例

12
Nadhir Falta

依存関係と、それらがビルドdist出力に与える影響を分析するために、少し時間をかける必要があります。

ビルド：

ng build --target=production --environment=prod --aot --build-optimizer -sourcemaps --stats-json

（これらの引数のいくつかは暗示されていますが、環境がデフォルトを超えて変更された場合には、冗長性を選択しました。）

stats.jsonファイルが出力され、webpack-bundle-analyzerを実行してwebpack-bundle-analyzer dist/stats.jsonで分析できます。

不要なライブラリを削除し、ツリーの揺れをリファクタリングし、無責任に大きなライブラリを別のライブラリに置き換えます。

Package.jsonの内容を見ることなく、これは本番環境の最適化を理解し始めるための出発点となります。

参照：

6
yomateo

私が見つけた素晴らしいツールは source map Explorer でした。これは、モジュールで使用するすべてのインポートに使用されるスペースを表示するツールです。この画像は、ソースマップエクスプローラーを実行したときの管理モジュールの例です。

enter image description here

このツールは、削除するのを忘れたインポートをいくつか指摘し、ファイルを大きくしすぎていました。

5
Pedro Arantes

ジャンクではありません。ngbuildコマンドはデフォルトで開発者プロファイルを取得し、プロジェクト上のすべての必要なファイルを使用してdistをビルドします（tsはjsにコンパイルされます）。デフォルトではdevプロファイルなので、名前の付いた.chunkファイルのようなものがあります。開発者プロファイルとprodプロファイルも、package.jsonファイルに応じて異なる依存関係を持っています。

https://github.com/angular/angular-cli/wiki/build を参照

2
Asura

このコマンドを使用して、angular 5/6：

node --max_old_space_size=5048 ./node_modules/.bin/ngbuild --aot --prod --build-optimizer
1
nagender pratap chauhan

実動ビルド後にbrotli圧縮を実行できます。これにより、ロード時間が改善されます。 https://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/

0
Sanju M