Уменьшите размер вывода углового элемента с помощью peerDependencies - PullRequest
Новая
       17

Уменьшите размер вывода углового элемента с помощью peerDependencies

0 голосов
/ 17 апреля 2019

Мы пытаемся создать угловой элемент (с Angular 7), который должен использоваться в проекте AngularJS. Размер выходного файла .js составляет 5 МБ ... слишком много.

Анализ с помощью webpack-bundle-analyzer показывает, что большая часть пространства используется зависимостями, которые также необходимы в проекте AngularJS - не должно быть необходимости иметь библиотеки два раза в коде.

Поэтому я подумал о том, чтобы объявить эти зависимости как peerDependencies в package.json. Я надеялся, что выходной файл станет меньше. Но, к сожалению, результат компоновки с peerDependencies одинаков по размеру . Я неправильно понимаю концепцию peerDependencies или мне нужен специальный параметр сборки? 

"dependencies": {
    "@angular/animations": "^7.2.7",
    "@angular/cdk": "^7.3.3",
    "@angular/common": "^7.2.7",
    "@angular/compiler": "^7.2.7",
    "@angular/core": "^7.2.7",
    "@angular/elements": "^7.2.7",
    "@angular/forms": "^7.2.7",
    "@angular/http": "^7.2.7",
    "@angular/material": "^7.3.3",
    "@angular/platform-browser": "^7.2.7",
    "@angular/platform-browser-dynamic": "^7.2.7",
    "@angular/router": "^7.2.7",
    "@angular/upgrade": "^7.2.7",
    "dateformat": "^3.0.2",
    "in-view": "^0.6.1",
    "keycode": "^2.1.9",
    "lodash": "^4.17.5",
    "material-design-icons": "^3.0.1",
    "ng2-nouislider": "^1.7.13",
    "nouislider": "^12.1.0",
    "reflect-metadata": "^0.1.12",
    "rxjs": "6.4.0",
    "rxjs-compat": "^6.0.0-rc.0",
    "zone.js": "^0.8.29"
  },
  "peerDependencies": {
    "compass-mixins": "^0.12.10",
    "core-js": "^2.5.4",
    "devextreme": "^18.2.6",
    "devextreme-angular": "^18.2.6",
    "devextreme-intl": "^18.2.6",
    "jquery": "^3.0.0",
    "muuri": "0.5.4",
    "moment": "^2.22.2"
  },
 "devDependencies": {
    "@angular-devkit/build-angular": "~0.10.0",
    "@angular/cli": "~7.3.4",
    "@angular/compiler-cli": "7.2.7",
    "@angular/language-service": "~7.2.7",
    "@angular/platform-server": "7.2.7",
    "@types/dateformat": "^1.0.1",
    "@types/jasmine": "^2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/jquery": "^3.2.12",
    "@types/node": "^8.9.5",
    "clang-format": "^1.0.32",
    "core-js": "^2.5.4",
    "codelyzer": "~4.5.0",
    "compass-mixins": "^0.12.10",
    "css-loader": "^0.28.7",
    "del": "^3.0.0",
    "devextreme": "^18.2.6",
    "devextreme-angular": "^18.2.6",
    "devextreme-intl": "^18.2.6",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.1",
    "fs-extra": "^4.0.1",
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "^3.2.0",
    "jasmine-core": "^2.99.0",
    "jquery": "^3.0.0",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-typescript": "^4.0.0",
    "lodash.throttle": "^4.1.1",
    "moment": "^2.22.2",
    "muuri": "0.5.4",
    "ng-packagr": "^5.1.0",
    "ng-annotate-webpack-plugin": "^0.2.1-pre",
    "ng-focus-if": "^1.0.7",
    "node-sass": "^4.10.0",
    "node-sass-json-importer": "^3.0.2",
    "pre-commit": "^1.2.2",
    "properties-loader": "0.0.1",
    "protractor": "~5.4.0",
    "sass-loader": "^7.0.1",
    "script-loader": "^0.7.2",
    "source-map-loader": "^0.2.1",
    "style-loader": "^0.21.0",
    "ts-loader": "^4.2.0",
    "ts-node": "~7.0.0",
    "tslint": "^5.11.0",
    "typescript": "3.2.4",
    "webpack-bundle-analyzer": "^3.0.3"
  }

Например, 1,88 МБ дискового пространства требуется для зависимости Devextreme, а также для зависимости от равноправных узлов.

1 Ответ

1 голос
/ 08 мая 2019

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

Решение может быть ngx-build-plus .

С помощью этого плагина для CLI возможноразделить зависимости между угловыми элементами.Это описано на шаге 5:

Создайте файл webpack.extra.js с частичной конфигурацией веб-пакета, который сообщает веб-пакету об исключении таких пакетов, как @ angular / core: 

module.exports = {
    "externals": {
        "rxjs": "rxjs",
        "@angular/core": "ng.core",
        "@angular/common": "ng.common",
        "@angular/platform-browser": "ng.platformBrowser",
        "@angular/elements": "ng.elements"
    }
}
...