Question

我们正在尝试构建一个应在AngularJS项目中使用的Angular元素（使用Angular 7）。输出的.js文件很大5 MB ...

使用webpack-bundle-analyzer进行的分析表明，大多数空间都由AngularJS项目中也需要的依赖项占用-不必在代码中两次拥有这些库。

所以我的想法是在package.json中将这些依赖项声明为peerDependencies。我希望输出文件会变小。 但不幸的是，具有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中介绍过，很显然，您希望共享Angular Element的依赖性。问题是，尚无官方支持。

解决方案可能是ngx-build-plus。

使用此CLI插件，可以在Angular Elements之间共享依赖关系。在步骤5中对此进行了描述：

使用部分webpack配置创建文件webpack.extra.js，该配置告诉webpack排除@ angular / core之类的软件包：

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

通过peerDependencies减小Angular Element输出的大小

1 个答案: