V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xiaomimix5
V2EX  ›  程序员

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

  •  
  •   xiaomimix5 · 2019-11-08 17:29:44 +08:00 · 3677 次点击
    这是一个创建于 1842 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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
        1
    maichael  
       2019-11-08 17:42:28 +08:00
    尝试更新一下 cli 的版本,反正官方的 issue 唯一说的就是让人更新 cli 版本。
    vanton
        2
    vanton  
       2019-11-08 17:47:25 +08:00
    内存不足,跑的时候看下内存使用。
    wszgrcy
        3
    wszgrcy  
       2019-11-08 17:55:25 +08:00 via Android
    。。。这是多大的项目啊?我打包 3 分钟都觉得够卡的了,打包 ng 源码也才十几分钟
    xiaomimix5
        4
    xiaomimix5  
    OP
       2019-11-08 18:02:53 +08:00
    @wszgrcy 前端打包完成后的压缩包 3Mb 左右。。。。我要 30-50 分钟才能打完,真是羡慕这种 3 分钟的“快枪手”。。。
    xiaomimix5
        5
    xiaomimix5  
    OP
       2019-11-08 18:04:00 +08:00
    @vanton 我加到 16H 32G 的服务器,也是要 20 多分钟,没有明显的改善。
    vanton
        6
    vanton  
       2019-11-08 18:22:26 +08:00
    @xiaomimix5 #5 可以看下这个 https://github.com/webpack/webpack/issues/8557

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

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

    我的是 ModuleConcatenationPlugin 这里卡住了。耗时在这将近半小时。
    yuuko
        8
    yuuko  
       2019-11-08 21:22:38 +08:00
    angular 项目是我见过打包用时最长,内存使用最大的。。。docker 里面打包直接超过 docker 默认内存限制。。。
    lswang
        9
    lswang  
       2019-11-09 22:55:01 +08:00 via iPhone
    不会吧,我之前项目好几万前端代码打包 2 到 3 分钟。后来用 angular6 的 cli,项目小了点,几十秒搞定
    xiaomimix5
        10
    xiaomimix5  
    OP
       2019-11-09 23:22:57 +08:00
    @lswang 所以,通过查看我贴出来的 package.json,能发现一些问题么
    xiaomimix5
        11
    xiaomimix5  
    OP
       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 这影响到生产环境的性能了吧,没有对代码进行优化?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2862 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 14:09 · PVG 22:09 · LAX 06:09 · JFK 09:09
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.