如何降低 webpack 打包时的内存占用

V2EX = way to explore

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

现在注册

已注册用户请登录

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

webpack 打包时单个 node 能飙到 3G+ 内存（ top 观察还会有另外一个 node 进程，占 1G 左右）

机器内存较小，构建经常失败。请问如何能降低 webpack 构建内存占用？

SF 上的方法说： 设置 `NODE_OPTIONS=–-max-old-space-size=2048` ，测试无效。

附上 package.json

{
  "name": "",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "export NODE_OPTIONS=–-max-old-space-size=2048 && vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-brands-svg-icons": "^6.1.1",
    "@fortawesome/free-regular-svg-icons": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/vue-fontawesome": "^2.0.6",
    "@stoplight/json-schema-ref-parser": "^9.2.2",
    "@stoplight/json-schema-sampler": "^0.2.2",
    "axios": "^0.24.0",
    "core-js": "^3.8.3",
    "echarts": "^5.2.2",
    "element-ui": "^2.15.9",
    "lodash": "^4.17.21",
    "marked": "^4.0.13",
    "moment": "^2.29.4",
    "monaco-editor": "^0.33.0",
    "monaco-editor-webpack-plugin": "^7.0.1",
    "url": "^0.11.0",
    "util": "^0.12.4",
    "uuid": "^8.3.2",
    "vue": "^2.6.14",
    "vue-codemirror": "^4.0.6",
    "vue-contextmenujs": "^1.3.13",
    "vue-echarts": "^6.0.0",
    "vue-grid-layout": "^2.3.12",
    "vue-multipane": "^0.9.5",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@babel/core": "^7.17.8",
    "@babel/eslint-parser": "^7.17.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/composition-api": "^1.4.9",
    "eslint": "^8.12.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.6.0",
    "node-sass": "^7.0.1",
    "prettier": "^2.6.2",
    "process": "^0.11.10",
    "sass-loader": "^12.6.0",
    "vue-template-compiler": "^2.6.14"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

11 条回复 • 2022-08-02 11:45:37 +08:00

ragnaroks

2022-08-01 20:30:47 +08:00

不懂帮顶，不过你们这是几千个页面的巨型项目么，以前还用 vue 的时候用 nuxt 撸几百个页面的后台打包也不超过 1 GiB 占用。

rabbbit

2022-08-01 20:34:45 +08:00

项目底下有多个 node_modules 吗?
如果是的话可以改成硬、链接到一个公共的 node_modules 。

IvanLi127

2022-08-01 20:39:02 +08:00 via Android

加 swap 。。。打包机内存小可不行

dingyaguang117

2022-08-01 20:41:32 +08:00

@ragnaroks 页面不多，感觉可能是引用了一些巨型组件: monaco 这种

dingyaguang117

2022-08-01 20:42:22 +08:00

@rabbbit 只有一个呢.. 怎么分析是构建哪个库的问题？删掉一些依赖试试？

dingyaguang117

2022-08-01 20:45:04 +08:00

PS：机器本身 8G ，还跑了 Jenkins 占 1-3G 左右。每次挂的其实不是 node 进程，而是 Jenkins 。观察到内存一大飙起来 Jenkins 先挂了，导致构建也失败了。也不知道为啥杀进程策略每次都是先杀 Jenkins 。Jenkins 重启之后刚开始内存还不大，这时候立即构建一次一般能成功。

makelove

2022-08-01 20:48:21 +08:00

对付 node 内存爆炸安装一个 jemalloc 有奇效，
设置环境变量： LD_PRELOAD=/usr/lib/libjemalloc.so
注意这个 so 文件不同发行版可能位置不一样

makelove

2022-08-01 21:14:46 +08:00

我的 app 进程我一般还加 --max_old_space_size=512 --max_semi_space_size=8
以前也很有效果，现在过了这么多版本效果未知，可能是你这个 2048 太大了

dingyaguang117

2022-08-01 21:28:42 +08:00 via iPhone

@makelove 加了 2g 实际跑到 2.9G 不知道为啥没生效

dingyaguang117

2022-08-01 21:28:56 +08:00 via iPhone

@makelove 我试试你的

dingyaguang117

2022-08-02 11:45:37 +08:00

@IvanLi127 测试加 SWAP 可行，目前没再挂过了