Как правильно построить оптимизированный проект Angular 5?

Я новичок в проекте Angular 5. Я запустил ng build --prod для создания папки dist/.

Я заметил, что для создания требуется довольно много времени, и когда я открыл свою папку dist/, я увидел, что у нее почти 98% бесполезных вещей, таких как SVG, изображения и т.д.

Как я могу управлять тем, что входит в мой 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"
  }
}

Как мне оптимизировать? И только построить, что требуется для моего сайта?

В настоящее время для сборки на моем сервере требуется 15 минут. Как сделать его быстрее?

Ответы

Ответ 1

Для медленной сборки вы можете использовать эту версию angular cli:

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

это сократило время моего строительства с 30 минут до 3 минут.

В angular 5 AOT и build-optimizer по умолчанию используются в prod-сборках.

ng build --prod --named-chunks добавление - named-chunks в вашу команду сборки даст вам именованные фрагменты, чтобы вы могли лучше анализировать свои куски и лучше улучшать то, что вы импортируете в каждом модуле. Пример, который, возможно, вы импортируете весь общий модуль в определенный модуль, в то время как вы просто используете одну вещь из этого общего модуля

Ответ 2

Вам нужно потратить некоторое время на анализ ваших зависимостей и их влияния на результаты сборки.

Сборка с:

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

(Хотя некоторые из этих аргументов подразумеваются, я выбрал многословие в том случае, если среда была изменена за пределами значений по умолчанию.)

Который stats.json файл stats.json который затем можно проанализировать с помощью webpack-bundle-analyzer, запустив: webpack-bundle-analyzer dist/stats.json

Удалите ненужные библиотеки, реорганизуйте для встряхивания деревьев, замените безответственно большие библиотеки альтернативами.

Не видя содержимого вашего package.json, это даст вам отправную точку для понимания оптимизации для производства.

Рекомендации:

Ответ 3

Отличный инструмент, который я нашел, был исследователем исходных карт. Это инструмент, который показывает вам пространство, используемое для всех импортов, которые вы используете в модуле. Изображение является примером моего модуля администратора, когда я запускаю проводник исходной карты:

enter image description here

Этот инструмент очень помог мне, указав некоторые операции импорта, которые я забыл удалить, и позволил моим файлам стать слишком большими.

Ответ 4

Это не мусор, команда ng build по умолчанию получит профиль разработчика и построит dist со всем необходимым файлом в вашем проекте (например, ts скомпилируется в js). Поскольку он имеет профиль dev по умолчанию, вы видите вещь как именованный .chunk файл среди других вещей. Профиль разработчика и профиль prod также имеют разные зависимости в зависимости от вашего файла package.json.

см. https://github.com/angular/angular-cli/wiki/build для

Ответ 5

Используйте эту команду для оптимизации сборки для угловых 5/6:

node --max_old_space_size=5048 ./node_modules/.bin/ngbuild --aot --prod --build-optimizer

Ответ 7

конфиг в angular.json

"configurations": {
  "production": {
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot":true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": false,
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
  }
}

и создайте свой проект:

node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng build --prod --build-optimizer=true --vendor-chunk=true --aot --base-href "/project/app"