webpack-dev-server 在 Rails 應用程序中編譯非常慢

Question

當我跑

bin/webpack-dev-server

在使用 react-rails gem 的 rails 5.1.7 應用程序上，它可能會卡住超過 10-20 分鍾並顯示以下消息：

ℹ ｢wdm｣: wait until bundle finished: /packs/js/application-5bc097626fe492d88e56.js

我的配置是：

在 erb.js 中

module.exports = {
  test: /\.erb$/,
  enforce: 'pre',
  exclude: /node_modules/,
  use: [{
    loader: 'rails-erb-loader',
    options: {
      runner: (/^win/.test(process.platform) ? 'ruby ' : '') + 'bin/rails runner'
    }
  }]
}

在 development.js 中

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const environment = require('./environment')

// Watch directories that often change the views.
// From: https://github.com/rails/webpacker/issues/1879#issuecomment-558397652
const chokidar = require('chokidar')
environment.config.devServer.before = (app, server) => {
  chokidar.watch([
    'config/locales/**/*.yml',
    'app/views/**/*.html.erb',
    'app/assets/**/*.scss'
  ]).on('change', () => server.sockWrite(server.sockets, 'content-changed'))
}

module.exports = environment.toWebpackConfig()

Answer 1

加速webpack-dev-server ：

1. 使用javascript_packs_with_chunks_tag而不是javascript_pack_tag
2. 將environment.splitChunks()添加到config/webpack/environment.js

Answer 2

我認為這可能是因為rails-erb-loader通常在構建時可能需要 10 秒以上。

嘗試安裝speed-measure-webpack-plugin ，它將幫助您了解每一步將采取的措施。

const environment = require('./environment')

const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
const smp = new SpeedMeasurePlugin()

module.exports = smp.wrap(environment.toWebpackConfig())