Уменьшите размер вывода углового элемента с помощью peerDependencies
Мы пытаемся создать угловой элемент (с 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 ответ
Часть зависимостей одноранговых узлов уже описана в комментариях, и ясно, что вы хотели бы поделиться зависимостями вашего углового элемента. Проблема в том, что это официально еще не поддерживается.
Решением может быть ngx-build-plus.
С помощью этого плагина для CLI можно обмениваться зависимостями между Angular Elements. Это описано в шаге 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"
}
}