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
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.
Our team is looking forward to hearing from you.
Kind regards,
Illia
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.
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
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
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