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

5 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 ⋅ 17 hours ago

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

Flexmonster production build is slower than development build

5 answers

Please login or Register to Submit Answer