用peerDependencies减小角元输出的尺寸

Question

我们正在尝试构建一个在AngularJS项目中应该使用的角元素(带有角7)。输出的.js文件是5MB大.为了更多。

使用webpack-bundle分析器进行的分析表明，大多数空间是由AngularJS项目中也需要的依赖项使用的--不应该在代码中使用两次库。

因此，我的想法是在package.json中将这些依赖项声明为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"
  }

例如，Devextreme依赖项需要1,88 MB的磁盘空间，这也是对等依赖关系。

Answer 1

对等依赖部分已经包含在commetns中，很明显，您喜欢共享角元素的依赖关系。问题是，这还没有得到官方的支持。

解决方案可能是ngx-。

有了这个CLI插件，就可以在角元素之间共享依赖关系。在步骤5中对此进行了描述：

创建一个带有部分webpack配置的文件webpack.extra.js，该配置告诉webpack排除诸如@角形/核心这样的包：

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