Flexmonster production build is slower than development build

posted on April 7th, 2021

Answered

dan asked on April 7, 2021

Hi there
We are using Flexmonster + React (class component + new Flexmonster() calls). Strangely we found that production build is 2 – 3 times slower than development build. Any idea what might be the cause?
From Chrome’s performance tab it seems in production build it’s calling this “value” method a lot. In dev build the methods actually have names that are less ‘readable’.

Dan

11 answers

Public

Illia Yatsyshyn ⋅ Flexmonster ⋅ April 8, 2021

Hello, Dan,

Thank you for reaching out to us.

We want to ask for some additional details about your case to try reproducing it on our side.

What plugin is used to perform development and production builds in the project.
Please send us the plugin configurations both for development and production builds.
It would also be helpful to see the full script dedicated to starting builds in the project.
Please provide us with additional information about “less readable” method names in the development build and how it differs from the names in the production build. We assume the difference in performance may be caused by the extra obfuscation of the minimized JS file containing Flexmonster. Therefore, it would be useful for us to have detailed information on this point.

Our team is looking forward to hearing from you.

Kind regards,
Illia

Public

dan ⋅ April 8, 2021

Create react app
no config was changed, just use whatever create react app provided by default
again, the build script is provided by create react app
in dev, we see short function names that are not English words. In prod it seems all of them are translated to ‘value’, maybe it’s just what create web app does.

Some additional observation, it seems this particular issue is more profound when loading data source that’s in CSV format. For JSON formatted data the performance is similar in dev and prod. But for CSV format, the ‘analyzing’ data phase is 2-3 times slower in prod build.

Public

Illia Yatsyshyn ⋅ Flexmonster ⋅ April 9, 2021

Hello,

Thank you for providing the details.

We may need some time to reproduce the issue and investigate possible causes.
Our team will reach out to you as soon as possible.

Feel free to contact us in case any additional questions arise.

Best regards,
Illia

Public

Illia Yatsyshyn ⋅ Flexmonster ⋅ April 9, 2021

Hello, Dan,

Thank you for giving us some time.

We did manage to reproduce this behavior using our react sample. Also, we noticed both CSV and JSON analysis takes more time on the production build.
Our team will research this issue and provide you with results ETA May 05.

Please let us know if it works for you.

Best regards,
Illia

Public

Illia Yatsyshyn ⋅ Flexmonster ⋅ April 22, 2021

Hello, Dan,

We are happy to let you know that we did manage to investigate the issue earlier.

The problem seems to be caused by the babel-loader tool used while building React apps with Webpack.
The solution is to exclude Flexmonster from files requiring transpilation.
First, you will need to expose Webpack and babel-loader configuration by running the npm run eject command.
Next, exclude Flexmonster from the babel-loader configuration in the `webpack.config.js` file:

// Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.
{
  test: /\.(js|mjs)$/,
  exclude: [
    /node_modules[\\/]flexmonster/,
    /@babel(?:\/|\\{1,2})runtime/
  ],
loader: require.resolve('babel-loader'),
...

Please let us know if it works for you.

Best regards,
Illia

Public

dan ⋅ April 26, 2021

Hi Illia
Thanks for this. I haven’t tried ejecting the react project before as it’s non-reversible…. so I was thinking maybe we’ll add a build script that will do the eject and build so the project remains non-ejected until we need to build it.
After ejecting do I still use the normal npm run build to build the rest of our react app?

regards
Dan

Public

Illia Yatsyshyn ⋅ Flexmonster ⋅ April 26, 2021

Hello, Dan,

Thank you for your feedback.

We want to confirm that after ejecting and configuring excluded file the project can be launched using the “npm run build” command.

Concerning the possibility of ejecting and building the component afterward with the aim to preserve the project unejected.
We are not ready to provide you with a determined answer on this point. Our concern is the fact that the project may remain ejected after the build.
Still, we suggest creating an additional branch and testing this approach. In case of failure, you will be able to come back to the unejected version.

Also, we want to note that ejecting should not affect any other aspects of the application. It is a common practice that allows customizing the build configuration.

Please let us know if it helps.

Kind regards,
Illia

Public

Illia Yatsyshyn ⋅ Flexmonster ⋅ May 5, 2021

Hello, Dan,

We are wondering if the proposed solution works for you.

Looking forward to hearing your feedback.

Regards,
Illia

Public

dan ⋅ May 6, 2021

Hi Illia
Yes it works, thanks a lot.
What we do currently is to eject “just in time” when it’s time to build, so the project remains the same in github.

Public

dan ⋅ June 24, 2021

Hi Illia
We are planning to migrate to 2.9. Do we still need to build this way? Has the underlying issue been fixed in 2.9?

Public

Illia Yatsyshyn ⋅ Flexmonster ⋅ June 24, 2021

Hello, Dan,

Thank you for your question.

Please note that the discussed issue is caused by the way React build is performed. In its turn, Flexmonster will continue to be delivered as a minified file that should not be transpiled by other tools.

Therefore, we suggest either use the current build approach or fully ejecting the project to change the Babel configuration.

We hope it helps.
Feel free to reach out if other questions arise.

Best regards,
Illia

Flexmonster production build is slower than development build

11 answers

Please login or Register to Submit Answer