Angular9：为什么整个rxjs库都进入build bundle？

Question

如果我使用 angular 9.1.1 创建一个空的基础项目并构建它，整个 rxjs 将出现在最终的包中。

webpack-bundle analyzer screenshot

package.json 是基础：

  "dependencies": {
"@angular/animations": "~9.1.1",
"@angular/common": "~9.1.1",
"@angular/compiler": "~9.1.1",
"@angular/core": "~9.1.1",
"@angular/forms": "~9.1.1",
"@angular/platform-browser": "~9.1.1",
"@angular/platform-browser-dynamic": "~9.1.1",
"rxjs": "~6.5.5",
"tslib": "^1.11.1",
"zone.js": "~0.10.3"

},

正常吗？使用 --prod 标志构建时 rxjs 大小为 70kb，这似乎不正常。

Answer 1

仅查看您的文件名，我可以看出您没有使用生产构建来构建应用程序（除非您使用 --output-hashing none 禁用了输出哈希）。

Angular 中的生产版本设置了 --prod 标志，或从 angular.json 文件配置中设置。当您构建用于生产的应用程序时，它还会对未使用的第 3 个库函数进行 tree shaking，例如 rx 运算符。

除此之外，我强烈建议您使用 source-map-explorer 而不是 webpack 捆绑工具。

运行这 2 个命令：

ng build --prod --source-maps

npx source-map-explorer dist/APP_NAME/main-es2015.*.js

Angular9：为什么整个rxjs库都进入build bundle？

Angular 9: why does thee entire rxjs lib get into build bundle?

size

bundle

build

rxjs

angular