webpack 问题, angular 通过 angular-CLi 打包优化--打包要近 40 分钟,请教如何优化

2019-11-08 17:29:44 +08:00
 xiaomimix5

optimization.concatenateModules 卡在此处 79% 很长时间。一直在优化?代码写的太臃肿了?

win 10 4h8g 时间是 2600 秒左右===40 多分钟。

CentOS 4H8G 36 分钟完成

尝试过增加打包服务器配置( CentOS 7 ),4 核 8G,8 核 16G 等都尝试过,甚至用了 16 核 32G 的电脑,没有明显的改善, 用 2 核 4G 的服务器会导致服务器占用达到 100%而服务器瘫痪。

我的项目 不算大,依赖的组件也不多,打包成功后,经压缩的 zip 文件是 3.6Mb 左右的大小。 打包命令是 "bp8": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng build --prod",

package.json


{
  "name": "www",
  "version": "6.8.21",
  "description": "www",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.config.json",
    "build": "set NODE_OPTIONS=--max_old_space_size=4096 && ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "prod": "ng build --prod --vendor-chunk=true",
    "build-prod": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build --prod",
    "bp": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build --prod",
    "bp8": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng build --prod",
    "bp16": "node --max_old_space_size=15000 ./node_modules/@angular/cli/bin/ng build --prod"


  },
  "private": true,
  "dependencies": {
    "@angular/animations": "8.0.0-beta.6",
    "@angular/cdk": "7.3.7",
    "@angular/common": "8.0.0-beta.6",
    "@angular/compiler": "8.0.0-beta.6",
    "@angular/core": "8.0.0-beta.6",
    "@angular/forms": "8.0.0-beta.6",
    "@angular/http": "8.0.0-beta.6",
    "@angular/material": "7.3.7",
    "@angular/material-moment-adapter": "7.3.7",
    "@angular/platform-browser": "8.0.0-beta.6",
    "@angular/platform-browser-dynamic": "8.0.0-beta.6",
    "@angular/pwa": "0.13.7",
    "@angular/router": "8.0.0-beta.6",
    "@angular/service-worker": "8.0.0-beta.6",
    "angular2-baidu-map": "4.6.0",
    "core-js": "2.6.5",
    "hammerjs": "2.0.8",
    "immer": " 3.1.1",
    "moment": "2.24.0",
    "ng2-file-upload": "1.3.0",
    "ngx-toastr": "10.0.2",
    "reuse-tab": "1.0.5",
    "rxjs": "6.5.2",
    "rxjs-compat": "6.5.2",
    "web-animations-js": "2.3.1",
    "zone.js": "0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "0.13.9",
    "@angular/cli": "7.3.7",
    "@angular/compiler-cli": "8.0.0-beta.6",
    "@angular/flex-layout": "^7.0.0-beta.24",
    "@angularclass/hmr": "2.1.3",
    "@types/node": "12.0.0",
    "ts-node": "8.1.0",
    "typescript": "3.1.6"
  }
}
3678 次点击
所在节点    程序员
11 条回复
maichael
2019-11-08 17:42:28 +08:00
尝试更新一下 cli 的版本,反正官方的 issue 唯一说的就是让人更新 cli 版本。
vanton
2019-11-08 17:47:25 +08:00
内存不足,跑的时候看下内存使用。
wszgrcy
2019-11-08 17:55:25 +08:00
。。。这是多大的项目啊?我打包 3 分钟都觉得够卡的了,打包 ng 源码也才十几分钟
xiaomimix5
2019-11-08 18:02:53 +08:00
@wszgrcy 前端打包完成后的压缩包 3Mb 左右。。。。我要 30-50 分钟才能打完,真是羡慕这种 3 分钟的“快枪手”。。。
xiaomimix5
2019-11-08 18:04:00 +08:00
@vanton 我加到 16H 32G 的服务器,也是要 20 多分钟,没有明显的改善。
vanton
2019-11-08 18:22:26 +08:00
@xiaomimix5 #5 可以看下这个 https://github.com/webpack/webpack/issues/8557

装下 babel-plugin-dynamic-import-node 插件。

这里说的是异步加载优化速度慢。
xiaomimix5
2019-11-08 21:13:39 +08:00
@vanton
https://github.com/webpack/webpack/issues/8557
chunk graph very much slow

我的是 ModuleConcatenationPlugin 这里卡住了。耗时在这将近半小时。
yuuko
2019-11-08 21:22:38 +08:00
angular 项目是我见过打包用时最长,内存使用最大的。。。docker 里面打包直接超过 docker 默认内存限制。。。
lswang
2019-11-09 22:55:01 +08:00
不会吧,我之前项目好几万前端代码打包 2 到 3 分钟。后来用 angular6 的 cli,项目小了点,几十秒搞定
xiaomimix5
2019-11-09 23:22:57 +08:00
@lswang 所以,通过查看我贴出来的 package.json,能发现一些问题么
xiaomimix5
2019-11-10 22:24:02 +08:00
@lswang

"bp88": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng build --prod --aot=false --optimization=true --sourceMap=false --buildOptimizer=false"
我用此脚本打包后,速度 2 分钟内搞定了。
但是--aot=false -buildOptimizer=false 这影响到生产环境的性能了吧,没有对代码进行优化?

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/617687

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX