45min builds to 3min builds on Heroku with Ruby on Rails and React

Since I added React to my Ruby on Rails app, Heroku builds were INSANELY slow… like 45 minutes slow. Here is how I speed that up to 3 minutes builds.

Turns out there was an easy fix…

The Problem

The problem is that Ruby on Rails runs rake assets:precompile to compile the React files into a javascript bundle. That is not a problem if you can cache /public/packs , but Heroku does not cache this directory. Hell! The issue has been open since 2018 and there is still no fix!

First I tried the solution of this StackOverflow post, but it’s not practical because every-time you go back to into development mode, the /public/packs folder gets purged.

The Fix

Fix #1 (big speed impact – difficulty: intermediate)

The first fix is to activate the splitChunk plugin. A big thank to krnjn on GitHub. He shared his Webpack config and pointed out that you can reduce dramatically the compile time by activating the splitChunk plugin.

However, I was not able to use his solution. When I used the splitChunk plugin, it broke my UI (nothing was displayed anymore). Later I found that I need to change all the javascript_pack_tag with…