Rails pre-compile dying on 3MB react file

Question

We are using React on Rails within our Rails app. When we deploy, asset pre-compilation takes ~20 minutes.

Based on the deploy logs, it appears as though most of this time is spent pre-compiling a 3.3MB javascript file. That file "app.js" concatenates two files which are generated by webpack:

# app.js

//= require vendor-bundle (250KB)
//= require app-bundle  (3.3MB)

Should we just come to expect long pre-compile times given the size of app-bundle? Or, can we improve things?

As an additional note, we tried directly compiling app-bundle, instead of requiring it through app.js, and it took the same amount of time.

UPDATE:

We ended up breaking out the client code into a separate create-react-app project, which connects to our Rails app via API. The complexity of our devops and deployment pipeline was greatly reduced -- short of really digging into this error.

Volva

20 minutes is absurdly long for a 3mb js file. are you possibly precompiling stuff in a node_modules folder by accident? – Och

It's definitely the app.js file that is taking 20 minutes. We removed it and the entire deploy took 3 minutes. – Volva

something is going majorly wrong then. definitely not expected behaviour. maybe drop the asset-pipeline and just use the optimizations that are available for webpack – Och

Sounds like you need some debugging help. I'm the creator of React on Rails. We have a support plan to help you. See shakacode.com/work/shakacode-pro-support.pdf – Installation

Hard to comment this way, it requires debugging and without a reproducible sample it is difficult to say what could be wrong – Gaea

We use webpack to bundle our react (1.3MB after bundle) and then copy that into the rails assets/javascript folder and use it there. Takes about 15sec to bundle, so whatever is going on is not correct. (Our setup is unique, as we are also using angular) How long does it take with webpack? Can you call the bundle from app.js (essentially a simplified version of what we do). – Hydrolysate

What version of webpack are you running? How long has this been going on? – Digger

Can you also check if there is anything downloaded ? – Merbromin

Please attach your webpack.vendor.config.js and webpack.app.config.js files – Madalene

@Ben, without additional info, your bounty is about to go down the drain – Gaea

Answer 1

You should definitely integrate webpack using the webpacker gem (https://github.com/rails/webpacker)

You can also try and check Bootsnap gem of Shopify (https://github.com/Shopify/bootsnap)

Aracelis