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

Question

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

我有Docker桌面(3.5.2，引擎:20.10.7)配置Linux容器使用WSL2后端。

我正在使用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

我已经尝试了很多这样的组合。即使在wsdl中运行VSCode.dev并通过浏览器访问它也是一种选择，但它都要跳过很多环节。

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

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

devcontainer的标准化。Json，在开发者之间共享，如果你不在你的普通开发机器上，可以使用github代码空间，这使得整个设置使用起来很愉快。

请参阅https://stackoverflow.com/a/72787362/183005查看详细的时序比较和设置细节