如何使用 WSL2 和 Docker 提高 VSCode 中的 TypeScript/Node 性能？

Question

我在 Windows (v1.58.2) 上使用 VSCode，以及远程 WSL 扩展 (v0.58.2)。

我有使用 WSL2 后端配置 Linux 容器的 Docker Desktop（3.5.2，引擎：20.10.7）。

我正在使用 Node（用于 React 前端和 NodeJS 后端）和 MySQL（直接来自 mysql:8.0.23）运行一些（我本来期望的）相当小规模的容器。

我的源代码在我的 WSL2 $HOME目录中，并使用绑定挂载挂载到 Docker 容器中，例如（来自docker-compose.yml ，在react-frontend和node_server目录的父目录中）

services:
  nodejs:
    build:
      context: node_server
      dockerfile: Dockerfile
      target: dev
    image: my-nodejs
    container_name: my-nodejs
    env_file: ./node_server/.env
    environment: 
      - MYSQL_HOST=db
      - NODE_PORT=12345
    ports:
      - "3005:12345"
    volumes:
      - ./node_server/src/:/usr/app/src
      - ./motorlogging.db:/usr/app/motorlogging.db
    networks:
      - app-network
    depends_on: 
      - db

  db:
    image: mysql:8.0.23
    container_name: my-mysql-db
    env_file: ./node_server/.env
    environment:
      - MYSQL_ROOT_PASSWORD=$MYSQL_PW
      - MYSQL_PASSWORD=$MYSQL_PW
      - MYSQL_DATABASE=$MYSQL_DB
    ports:
      - "3307:3306"
      - "33070:33060"
    networks:
      - app-network
    volumes:
    - dbdata:/var/lib/mysql
    - dbconfig:/etc/my.cnf
    - type: bind
      source: ./node_server/src/__test_setup__/
      target: /docker-entrypoint-initdb.d/
    # healthcheck:
    #   test: ["CMD", "mysqladmin", "ping", "-h", "localhost"]
    #   interval: 5s
    cap_add:
      - SYS_NICE
frontend:
    build:
      context: react_frontend
      dockerfile: Dockerfile
      target: dev
    image: my-frontend
    container_name: my-frontend
    ports:
      - "3000:3000"
    volumes:
      - ./react_frontend/src/:/usr/app/src
      - ./react_frontend/public/:/usr/app/public
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

volumes:
  dbdata:
  dbconfig:

React 前端（使用 Create-React-App 构建）Dockerfile 读取（删除了未使用的目标）：

FROM node:14.17-buster-slim AS base
# Default to production
ENV NODE_ENV=production

RUN mkdir /usr/app && chown -R node:node /usr/app/
WORKDIR /usr/app

USER node
COPY --chown=node:node package.json package-lock.json ./
RUN npm ci && npm cache clean --force
COPY --chown=node:node tsconfig.json ./

FROM base AS dev
ENV NODE_ENV=development
RUN npm install --only=development
ENV PATH /usr/app/node_modules/.bin:$PATH
CMD ["npm", "start"]

这一切都“有效”，但是 Vmmem 的内存使用率很高（达到了我在.wslconfig中设置的任何限制，目前为 4GB，并且有时会导致 WSL2 容器崩溃。

使用 TypeScript 的自动完成提示非常慢（约秒），有时使用 Prettier 自动格式化可能会使设置挂起几到 10 秒。

WSL2 容器中的htop显示内存主要由（与.../node在$HOME/.vscode-server/bin/some long hash-like string/node和.../暗示相同的目录）

.../node --max-old-space-size=3072 .../extensions/node_modules/typescript/lib/tsserver.js ...
.../node .../extensions/dbaeumer.vscode-eslint-2.1.23/server/out/eslintServer
other node js files, lesser impact

我想使用 VSCode、WSL2 和 Docker 开发 React 和 Node 应用程序并不少见，那么在设置它以获得如此令人沮丧的性能时我哪里出错了？ 或者我真的只需要更多（超过 4GB 分配，还用例如 6、8 GB 测试）RAM？

Answer 1

我已经尝试了很多这种组合。 甚至在 wsl 中运行 VSCode.dev 并通过浏览器访问它也是一种选择，但这一切都跳过了这么多圈。

VSCode 开发容器通常应该解决这个问题，但在 Windows 上我发现性能无法使用。

我已经决定在 Windows 上的 Linux VM 中运行 VSCode 和 docker，并且在运行服务器和观察代码以进行更改等事情上节省了 96% 的时间，这使得这种设置成为我现在的首选方式。

devcontainer.json 的标准化、开发人员之间的共享以及在您远离普通开发机器的情况下能够使用 github 代码空间使整个设置使用起来很愉快。

有关详细的时序比较和设置详细信息，请参阅https://stackoverflow.com/a/72787362/183005