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

Question

[Webpacker] Compiling…

It takes several seconds (6.2 seconds) to compile any of my changes to javascript files. It's really slowing my JS development down.

Is there any way to see what Webpacker in Rails is doing and which files it's spending most of its time on? It also be good if it could show me how much time each npm library was using.

I can manually run the rails webpacker:compile command but there doesn't seem to be any verbose mode on that.

Any help is appreciated, thanks!

Answer 1

I should've 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.

Running ./bin/webpack-dev-server uses live code reloading and is super fast!

Answer 2

rails webpacker:compile essentially just runs bin/webpack. See compiler.rb#L59. Unfortunately you can't pass it any options via rake but you can run it yourself in verbose mode to see what's going on:

bin/webpack --verbose

That's a bit hard to read and doesn't give good profiling information. You'll probably want to use the --profile flag instead:

bin/webpack --profile

This shows you the time it took to compile each of your packs and how large different chunks of code are.

Edit: I notice you said webpack-dev-server solves your problem in another answer. It may for now but our application takes 7 extra minutes to deploy because our JS is so bloated. I'm working on trimming things down and knowing the profiling information for each pack is a necessity to lowering our deploy times.

Answer 3

Use bin/webpack-dev-server (open in separate terminal before rails s) - it is faster, but also slow by default

To speed up webpack-dev-server -

1. use javascript_packs_with_chunks_tag instead of javascript_pack_tag

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

2. add environment.splitChunks() to config/webpack/environment.js

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