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!

Behl

did you find a solution? – Salmonoid

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!

Behl

This doesn't answer the question. I too wonder why webpacker takes so incredibly long sometimes. It would be helpful to see what packages are at fault. – Arbitrament

It doesn't answer the question but it solves the problem – Behl

Using ./bin/webpack-dev-server is not that fast on my macos. – Pontormo

Does not answer quesiton – Houghton

It seems like it just automates the process of compilation on file change but doesn't provide any insight into the speed of compilation. I'm having the same issue where tailwind css takes ~19 seconds to compile every single css change. Conversely, compilation on save made it more clunky albeit being hot reloaded cause it's getting recompiled every time I tap cmd+s – Plenary

Maybe it didn't answer the question but improved the js loading to the rocket speed. Thank you so much! – Cressi

The problem with webpack-dev-server is that it functions differently than webpacker. It throws a lot more errors, and for my current project is impacting some functionality – Teshatesla

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.

Mispickel

bin/webpack --verbose --profile also works and combines the output of the two commands – Tuition

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()

Cordoba

Thank you sooo much!! This really helped out with compilation. – Martynne