Vite开发服务器因chunk压缩后超500kB崩溃，如何提升容忍阈值？

问题背景 #

问题根源出在zxcvbn模块，对应的chunk体积信息如下：
../public/vite-dev/assets/zxcvbn-V60ZPkbA.js 818.73 kB │ gzip: 392.12 kB

当前使用的Vite配置代码：

import { defineConfig } from 'vite';
import path from 'path';
import RubyPlugin from 'vite-plugin-ruby';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    RubyPlugin(),
    vue({
      template: {
        compilerOptions: {
          // treat all tags with a dash as custom elements
          isCustomElement: tag => tag.includes('-')
        }
      }
    }),
  ],
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.esm-bundler.js',
      '@fa6path': process.env.NODE_ENV === 'production' ? path.resolve('/assets/font-awesome-6') : path.resolve('vendor/assets/stylesheets/font-awesome'),
    }
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    }
  },
  server: {
    watch: {
      // Exclude specific directories or files using glob patterns
      exclude: ['logs/**', 'tmp/**', 'node_modules/**', 'docker/'],
    },
  },
})

服务器因该大chunk频繁崩溃，需要提升开发服务器对chunk大小的容忍阈值（而非仅调整警告限制）。

解决方案 #

1. 调整开发服务器的文件大小限制 #

在Vite配置的server.fs中设置maxFileSize，提升单个文件的最大处理尺寸：

export default defineConfig({
  // ... 保留原有配置
  server: {
    fs: {
      // 设置为10MB（单位：字节），可按需调整
      maxFileSize: 10 * 1024 * 1024
    },
    watch: {
      exclude: ['logs/**', 'tmp/**', 'node_modules/**', 'docker/'],
    },
  },
})

2. 单独拆分zxcvbn模块的chunk #

修改manualChunks逻辑，将zxcvbn单独拆分为一个独立chunk，分散内存压力：

build: {
  rollupOptions: {
    output: {
      manualChunks(id) {
        if (id.includes('node_modules')) {
          // 单独拆分zxcvbn模块
          if (id.includes('zxcvbn')) {
            return 'zxcvbn';
          }
          return id.toString().split('node_modules/')[1].split('/')[0].toString();
        }
      }
    }
  },
},

3. 提升Node.js运行内存上限 #

如果崩溃是Node.js内存不足导致的，修改Vite启动命令，增加内存参数：
在package.json的scripts中调整dev命令：

"scripts": {
  "dev": "node --max-old-space-size=4096 node_modules/vite/bin/vite.js"
}

参数4096代表4GB内存，可根据你的机器配置调整为8192（8GB）等数值。

4. 临时禁用开发模式sourcemap（可选） #

sourcemap会显著增加内存占用，若无需调试zxcvbn代码，可临时禁用：

export default defineConfig({
  // ... 保留原有配置
  server: {
    sourcemap: false
  },
})

内容的提问来源于stack exchange，提问作者temp