ReactJS项目服务器Docker环境下包下载速度异常缓慢求助

我有一个ReactJS应用，在服务器的Docker容器中执行npm run dev时，包下载速度极慢。本地运行该命令时，11.6MB的包仅需0.7秒完成下载，而服务器上却耗时11分钟。

所有路由已配置懒加载，不清楚问题根源。应用运行在Docker容器中，使用相同的npm run dev命令，且同一虚拟机上的后端服务运行正常。

相关配置文件 #

package.json #

{
  "name": "dashboard-front",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "files": [
    "dist"
  ],
  "main": "./dist/my-lib.umd.cjs",
  "module": "./dist/my-lib.js",
  "exports": {
    ".": {
      "import": "./dist/my-lib.js",
      "require": "./dist/my-lib.umd.cjs"
    }
  },
  "scripts": {
    "dev": "vite --host",
    "build": "vite build",
    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@turf/turf": "^6.5.0",
    "axios": "^1.2.1",
    "date-fns": "^2.29.3",
    "dotenv": "^16.0.3",
    "firebase": "^9.21.0",
    "mapbox-gl": "^2.15.0",
    "plotly.js-dist-min": "^2.24.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.41.5",
    "react-icons": "^4.8.0",
    "react-map-gl": "^7.0.25",
    "react-modal": "^3.16.1",
    "react-plotly.js": "^2.6.0",
    "react-query": "^3.39.3",
    "react-router-dom": "^6.10.0",
    "react-select": "^5.7.3",
    "react-sliding-side-panel": "^2.0.3",
    "react-svg": "^16.1.12",
    "react-table": "^7.8.0",
    "react-toastify": "^9.1.3",
    "styled-components": "^5.3.6"
  },
  "devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^4.0.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "vite": "^4.3.2",
    "vite-plugin-fast-react-svg": "^0.4.0"
  }
}

vite.config.js #

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { svgPlugin } from "vite-plugin-fast-react-svg";

export default defineConfig({
  plugins: [
    react(),
    svgPlugin()
  ],
  server: {
    host: true,
    port: 3000,
    cors: false,
    watch: {
      usePolling: true
    }
  },
  preview: {
    host: 'localhost',
    port: 5000,
    strictPort: true,
    cors: false
  },
  build: {
    chunkSizeWarningLimit: 1000 * 500,
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return 'vendor';
          }
        },
      },
    },
  },
})

Dockerfile #

FROM node:alpine

WORKDIR /reactapp

COPY package.json package-lock.json ./

RUN npm ci

COPY . .

EXPOSE 3000

CMD ["npm", "run", "dev"]

docker-compose.yml #

version: '3.9'

services:
  reactapp:
    build: 
      context: .
      dockerfile: Dockerfile
    ports:
      - 3000:3000
    command: yarn dev
    environment:

解决方案 #

1. 切换npm国内镜像源 #

默认npm源访问海外服务器延迟高，在Dockerfile中添加镜像源配置，放在RUN npm ci之前：

RUN npm config set registry https://registry.npmmirror.com/

2. 统一包管理工具 #

docker-compose.yml中使用yarn dev，但Dockerfile用的是npm，工具不一致可能引发问题：

• 若使用npm，将docker-compose.yml的command改为npm run dev；
• 若使用yarn，Dockerfile替换为RUN yarn install，并确保项目根目录有yarn.lock文件。

3. 优化Docker网络配置 #

检查容器DNS解析是否正常，在docker-compose.yml中添加DNS服务器配置：

environment:
  - DNS_SERVER=8.8.8.8

4. 检查服务器网络性能 #

在服务器上执行以下命令测试网络速度：

# 测试npm源延迟
ping registry.npmmirror.com
# 测试单个包下载速度
curl -O https://registry.npmmirror.com/react/-/react-18.2.0.tgz

如果延迟过高或下载慢，需要排查服务器网络链路问题。

5. 调整Vite开发配置 #

• 检查服务器CPU、内存使用率，确保资源充足；
• 若服务器IO性能较差，可尝试关闭Vite的文件轮询：将server.watch.usePolling改为false（可能影响热更新灵敏度）。

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