Rails 5 中的 Webpacker 需要很长时间才能编译那么多文件。我怎样才能看到它在做什么？

Question

[Webpacker] Compiling…

编译我对 javascript 文件的任何更改需要几秒钟（6.2 秒）。这真的减慢了我的 JS 开发速度。

有什么方法可以查看 Rails 中的 Webpacker 在做什么以及它在哪些文件上花费了大部分时间？如果它能告诉我每个 npm 库使用了多少时间也很好。

我可以手动运行 rails webpacker:compile 命令，但似乎没有任何详细模式。

感谢任何帮助，谢谢！

Answer 1

我应该 RTFM:

If you want to use live code reloading, or you have enough JavaScript that on-demand compilation is too slow, you'll need to run ./bin/webpack-dev-server or ruby ./bin/webpack-dev-server. Windows users will need to run these commands in a terminal separate from bundle exec rails s. This process will watch for changes in the app/javascript/packs/*.js files and automatically reload the browser to match.

运行 ./bin/webpack-dev-server 使用实时代码重新加载，速度超快！

Answer 2

rails webpacker:compile 本质上只是运行s bin/webpack。参见 compiler.rb#L59。不幸的是，您不能通过 rake 向它传递任何选项，但您可以运行在详细模式下自己查看发生了什么：

bin/webpack --verbose

这有点难读，而且没有提供很好的分析信息。您可能希望改用 --profile 标志：

bin/webpack --profile

这显示了编译每个包所花费的时间以及不同代码块的大小。

编辑：我注意到你说 webpack-dev-server 在另一个答案中解决了你的问题。现在可能，但我们的应用程序需要额外 7 分钟才能部署，因为我们的 JS 太臃肿了。我正在努力精简内容，并且了解每个包的分析信息对于缩短我们的部署时间是必要的。

Answer 3

使用bin/webpack-dev-server（在rails s之前在单独的终端中打开）-它更快，但默认情况下也很慢

加速webpack-dev-server-

使用javascript_packs_with_chunks_tag代替javascript_pack_tag

    <%= Rails.env.production? ?
          javascript_pack_tag('application') :
          javascript_packs_with_chunks_tag('application') %>

将 environment.splitChunks() 添加到 config/webpack/environment.js

if (process.env.RAILS_ENV != 'production') environment.splitChunks()

Rails 5 中的 Webpacker 需要很长时间才能编译那么多文件。我怎样才能看到它在做什么？

Webpacker in Rails 5 takes a long time to compile not that many files. How can I see what it's doing?

webpack

ruby-on-rails-5

webpacker