1

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

使用 webpack-bundle-analyzer 进行的分析表明，大部分空间都被 AngularJS 项目中也需要的依赖项所使用——在代码中不需要两次包含库。

所以我的想法是将这些依赖项声明为 package.json 中的 peerDependencies。我希望输出文件会变小。但不幸的是，peerDependencies 的构建结果在 size 上是相同的。我误解了 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 的磁盘空间，也作为对等依赖项。

4

1 回答 1

2

对等依赖部分已经包含在评论中，很明显你喜欢分享你的 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"
    }
}
于 2019-05-08T05:32:52.653 回答