Docker环境下Rails 6应用Webpacker编译过慢的解决方案咨询

1. 挂载Webpacker编译缓存目录 #

Webpacker的编译缓存并非存在public/packs，而是存储在tmp/cache/webpacker目录。在docker-compose.yml中添加该目录的缓存挂载，同时用Docker Volume存储node_modules避免跨文件系统性能损耗：

services:
  web:
    volumes:
      - .:/app:cached
      - ./tmp/cache/webpacker:/app/tmp/cache/webpacker:cached
      - web_node_modules:/app/node_modules

volumes:
  web_node_modules:

2. 启用Webpack文件系统缓存 #

修改config/webpack/development.js，开启Webpack的文件系统级缓存，复用编译中间产物：

module.exports = {
  // 保留原有配置
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename]
    }
  }
}

3. 分离Webpack Dev Server为独立容器 #

把Webpack编译服务从Rails进程中剥离，单独启动容器持久化缓存，同时提升热重载效率：

services:
  web:
    # 保留Rails容器原有配置
    environment:
      - WEBPACKER_DEV_SERVER_HOST=webpacker

  webpacker:
    build: .
    command: ./bin/webpack-dev-server
    volumes:
      - .:/app:cached
      - webpacker_node_modules:/app/node_modules
      - webpacker_cache:/app/tmp/cache/webpacker
    ports:
      - '3035:3035'
    environment:
      - NODE_ENV=development
      - WEBPACKER_DEV_SERVER_HOST=0.0.0.0

volumes:
  webpacker_node_modules:
  webpacker_cache:

同时修改config/webpacker.yml中的dev_server配置：

development:
  dev_server:
    host: webpacker
    port: 3035

4. 优化Dockerfile缓存依赖层 #

调整Dockerfile的文件复制顺序，让依赖安装层可被缓存，避免每次构建都重新安装node_modules：

# 先复制依赖配置文件
COPY package.json yarn.lock ./
RUN yarn install --check-files

# 再复制项目代码
COPY . .

# 执行Rails构建步骤
RUN bundle install

5. 优化文件系统挂载性能 #

对于macOS/Windows用户，将项目根目录的挂载模式改为cached（已在上述配置中体现），可大幅提升文件读取速度，减少Webpack扫描文件的耗时。

内容的提问来源于stack exchange，提问作者vr-prt