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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1824 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

webpack

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

CentOS 4H8G 36 分钟完成

Linux CentOS 打包

尝试过增加打包服务器配置（ 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"
  }
}

11 条回复 • 2019-11-10 22:24:02 +08:00

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 via Android

。。。这是多大的项目啊？我打包 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 via iPhone

不会吧，我之前项目好几万前端代码打包 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 这影响到生产环境的性能了吧，没有对代码进行优化？