多node_modules目录下开发容器中npm install性能不佳问题排查

针对你遇到的根目录npm安装快，但子目录/docs、/storybook安装卡顿超时的问题，从配置和操作层面给出以下排查修复方案：

1. 修正用户权限配置 #

你的Dockerfile切换到了root用户，但dev containers基础镜像默认自带vscode用户，权限不匹配可能导致文件系统操作卡顿。调整Dockerfile：

ARG VARIANT="20-bullseye"
FROM mcr.microsoft.com/devcontainers/javascript-node:1-${VARIANT}

# 优先使用vscode用户保持权限一致性，避免root用户带来的文件系统权限开销
USER vscode

# 配置npm缓存目录到可读写路径，避免权限阻塞
RUN npm config set cache /tmp/npm-cache --global && mkdir -p /tmp/npm-cache && chmod -R 777 /tmp/npm-cache

2. 给npm缓存挂载独立卷 #

npm安装的大部分耗时在缓存拉取，给缓存目录挂载独立卷，复用缓存提升速度：
修改devcontainer.json的mounts数组，新增缓存卷：

"mounts": [
  "source=${localWorkspaceFolderBasename}-node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume",
  "source=${localWorkspaceFolderBasename}-storybook-node_modules,target=${containerWorkspaceFolder}/storybook/node_modules,type=volume",
  "source=${localWorkspaceFolderBasename}-docs-node_modules,target=${containerWorkspaceFolder}/docs/node_modules,type=volume",
  // 新增npm缓存卷
  "source=${localWorkspaceFolderBasename}-npm-cache,target=/home/vscode/.npm,type=volume"
]

如果坚持用root用户，把缓存路径改成/root/.npm。

3. 优化npm安装命令 #

执行子目录安装时，关闭不必要的网络检查，强制使用缓存：

# 进入docs目录安装
cd docs && npm install --no-audit --no-fund --prefer-offline

# 进入storybook目录安装
cd storybook && npm install --no-audit --no-fund --prefer-offline

--no-audit跳过安全检查，--no-fund跳过资金提示，--prefer-offline优先使用本地缓存，大幅减少网络请求。

4. 切换npm镜像源（针对网络延迟问题） #

如果容器内访问npm官方源延迟过高，切换到国内镜像源：
在Dockerfile中添加镜像源配置：

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

或者在容器内临时执行：

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

5. 验证卷挂载路径正确性 #

进入容器后，执行以下命令确认挂载路径是否匹配：

# 查看容器工作区路径
echo ${containerWorkspaceFolder}
# 检查子目录node_modules是否被正确挂载为卷
df -h | grep storybook/node_modules
df -h | grep docs/node_modules

如果输出中没有对应的卷条目，说明挂载路径拼写错误，修正devcontainer.json中的target路径。

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