angular 打包时间太长是否有可以通过参数来优化

问题描述

angular-material框架的前端,通过打包命令进行打包发布,
采用8核8G内存的CentOS 7 来打包,
时间是28分钟===1671秒。
图片描述

我在本地windows 10电脑(4核8G内存)打包到一半时提示内存溢出而不成功,加上内存参数也是--max_old_space_size=4096之后打包也是。

用2核4G linux电脑打包不成功
图片描述

问题出现的环境背景及自己尝试过哪些方法

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

打包命令是

"bp8": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng build --prod",

我的问题和疑惑

打包后的经过压缩后的文件包.zip大小是3Mb,
请问这个打包耗时正常吗,是否有其他命令加以改进打包效率,
感谢指点。

阅读 7.9k
5 个回答

这个明显不正常啊,普通笔记本最多一两分钟

提问是webpack?然后你不给看webpack打包配置文件,你让别人猜吗?

新手上路,请多包涵

@luCW
@yyccQQu

{
"name": "yiqif",
"version": "6.8.21",
"description": "yiqif",
"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"

}
}

新手上路,请多包涵

看下自己的tsconfig.json的文件,默认会打包es2015和es5两个版本,一般只打包es5即可

这个打包命令似乎有点奇怪。如果说使用angular-cli打包的话,直接ng build --pord`就可以了。

最大压缩化的命令是这个ng build --prod --build-optimizer

站内有篇文章写得很详细,你可以参考一下

说点Angular Cli打包的事

推荐问题
宣传栏