人称外号大脸猫

2 核 2G 小服务器 Linux Node 环境下 Vite 打包优化指南

在资源受限的 2 核 2G 小服务器上进行 Vite 项目构建,确实面临诸多挑战。下面从问题分析到解决方案,为你提供一套完整的优化指南。

一、问题分析:为什么小内存服务器上 Vite 打包容易失败?

  1. Vite 打包的内存消耗特点 依赖预构建阶段:Vite 会递归扫描并预构建项目依赖,这个过程需要将大量模块加载到内存中 Rollup 打包阶段:构建依赖图和生成最终产物时,需要在内存中维护完整的 AST (抽象语法树) 并行处理机制:Vite 默认会利用多核 CPU 进行并行处理,每个进程都会占用独立的内存空间
  2. 2 核 2G 服务器的资源瓶颈 可用内存实际不足 2G(系统和其他服务会占用部分内存) Node.js 默认内存上限通常为 1.4GB 左右(64 位系统) 缺乏足够的交换空间应对内存峰值

二、分步优化方案

  1. 基础环境优化 增加交换空间 (Swap)
# 创建4G交换文件
sudo dd if=/dev/zero of=/swapfile bs=1M count=4096
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile

# 设置开机自动挂载
echo '/swapfile none swap defaults 0 0' | sudo tee -a /etc/fstab

# 调整swappiness参数(降低到10,减少内存使用到swap的频率)
echo 'vm.swappiness=10' | sudo tee -a /etc/sysctl.conf
sudo sysctl -p

优化系统参数

# 调整内存分配策略
echo 'vm.overcommit_memory=1' | sudo tee -a /etc/sysctl.conf
sudo sysctl -p
  1. Node.js 内存配置优化 增加 Node.js 堆内存限制
# 在package.json脚本中增加内存参数
{
  "scripts": {
    "build": "NODE_OPTIONS=\"--max-old-space-size=1536\" vite build"
  }
}

Vite 配置优化 禁用 Source Map

// vite.config.js
export default {
  build: {
    sourcemap: false // 禁用sourcemap可大幅减少内存占用
  }
}

调整构建压缩器

// 使用terser替代esbuild,内存占用更可控
export default {
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        dead_code: true
      }
    }
  }
}

优化依赖预构建

export default {
  optimizeDeps: {
    include: ['react', 'react-dom', 'axios'], // 仅预构建必要的依赖
    exclude: ['大型第三方库'], // 排除不必要的预构建
    esbuildOptions: {
      workers: 1 // 限制预构建的工作线程数
    }
  }
}

控制代码分割

export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: (id) => {
          if (id.includes('node_modules')) {
            return 'vendor'; // 将所有依赖打包到一个文件
          }
        }
      }
    }
  }
}
  1. 减少构建时的内存压力 清理不必要的文件
# 构建前清理测试文件和不必要的资源
find . -type f -name "*.test.js" -o -name "*.spec.js" | xargs rm -f

禁用并行安装

# 使用pnpm时禁用并行安装
pnpm install --no-parallel
  1. 分步构建策略 分阶段构建静态资源和 JS/CSS
{
  "scripts": {
    "build:assets": "vite build --config vite.assets.config.js",
    "build:js": "vite build --config vite.js.config.js",
    "build": "pnpm run build:assets && pnpm run build:js"
  }
}

vite.assets.config.js 示例

export default {
  build: {
    rollupOptions: {
      input: {
        assets: 'src/assets/index.js'
      }
    }
  }
}
  1. 内存监控与分析 添加内存监控脚本
// memory-monitor.js
const fs = require('fs');
const path = require('path');

function logMemoryUsage(tag) {
  const used = process.memoryUsage();
  const memoryLog = {
    timestamp: new Date().toISOString(),
    tag,
    memory: {
      rss: `${Math.round(used.rss / 1024 / 1024)}MB`,
      heapTotal: `${Math.round(used.heapTotal / 1024 / 1024)}MB`,
      heapUsed: `${Math.round(used.heapUsed / 1024 / 1024)}MB`,
      external: `${Math.round(used.external / 1024 / 1024)}MB`
    }
  };
  
  const logPath = path.join(__dirname, 'memory-logs');
  if (!fs.existsSync(logPath)) {
    fs.mkdirSync(logPath);
  }
  
  fs.appendFileSync(
    path.join(logPath, `memory-${new Date().toISOString().split('T')[0]}.log`),
    JSON.stringify(memoryLog) + '\n'
  );
}

// 在关键位置调用
logMemoryUsage('build-start');

// 定时记录内存使用情况
setInterval(() => logMemoryUsage('interval'), 5000);

// 导出函数供其他脚本使用
module.exports = { logMemoryUsage };

三、完整优化配置示例

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    target: 'esnext',
    sourcemap: false,
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        passes: 2 // 增加压缩遍数以减小文件体积
      }
    },
    rollupOptions: {
      output: {
        manualChunks: (id) => {
          if (id.includes('node_modules')) {
            return 'vendor';
          }
        },
        chunkFileNames: 'assets/js/[name]-[hash].js',
        entryFileNames: 'assets/js/[name]-[hash].js'
      }
    },
    assetsInlineLimit: 4096, // 小于4KB的资源内联
    outDir: 'dist',
    emptyOutDir: true
  },
  optimizeDeps: {
    include: ['react', 'react-dom', 'react-router-dom', 'axios'],
    exclude: ['@loadable/component', '大型UI库'],
    esbuildOptions: {
      workers: 1
    }
  },
  plugins: [] // 移除不必要的插件以减少内存占用
});

四、执行优化构建的完整流程

# 1. 清理环境
pnpm store prune
rm -rf node_modules/.vite
rm -rf dist

# 2. 安装依赖(禁用并行)
pnpm install --no-parallel --no-optional

# 3. 构建前释放系统资源
sudo sync
sudo sysctl vm.drop_caches=3

# 4. 执行优化构建
NODE_OPTIONS="--max-old-space-size=1536" pnpm build

五、进一步优化建议

  • 考虑使用 CI/CD 服务:将构建过程转移到 GitHub Actions 或 GitLab CI 等外部服务,利用其更高的资源配置完成构建,然后只将构建结果部署到小服务器
  • 升级服务器配置:如果频繁进行构建操作,考虑升级到至少 4GB 内存的服务器,这将显著提高构建稳定性和速度
  • 采用增量构建策略:只构建发生变化的部分,这需要更复杂的缓存机制和构建脚本

通过以上优化措施,即使在 2 核 2G 的小服务器上,也能够相对稳定地完成 Vite 项目的打包构建工作。关键是通过系统级、Node.js 级和 Vite 配置级的多层优化,降低内存峰值,提高资源利用效率。

最后的最后我总结一句: 如果服务器比较垃圾,就老老实实的在本地构建打包好,上传到服务器上,减少不必要的烦恼与徒劳

copyright ©2025 ahimu.com all rights reserved 皖ICP备19021547号-1