CODEWITHSUNDEEP
reactjswebpackoptimizationhtml5-canvasbabeljs
Rajiv Nayan Choubey
Rajiv Nayan Choubey

Reputation: 41

Code running slower on production build than development server in reactjs

JavaScript Profiler Screenshot

I have been working on a reactjs project where I build ray tracer in reactjs. The app works fine in development server (in 0.3-0.7 secs to render one image). But as soon as I create production build, the time increases drastically to 5 seconds and sometimes to 10-12 seconds. I checked in JavaScript profiler, it says babel runtime takes most of the time in calling the methods in vec3.js. How to optimize the speed for the same. I have attached the screenshot of the JS profiler from chrome-dev-tool.

Upvotes: 4

Views: 1445

Answers (1)

Julien Barrois
Julien Barrois

Reputation: 169

As you are mentionning development server and production build, I guess that you are using Create React App.

The generated code in the production build is different from the one in development and this is because they are targetting different browsers.

More information here : https://create-react-app.dev/docs/supported-browsers-features/

By default, the generated project includes a browserslist configuration in your package.json file to target a broad range of browsers based on global usage (> 0.2%) for production builds, and modern browsers for development. This gives a good development experience, especially when using language features such as async/await, but still provides high compatibility with many browsers in production.

One solution to have the same performance in production than in develoment is then to update the your browserslist entry in package.json.

If you set the same value in production than in development, you will have the same performance, but as a conbsequence, your code might not run be running on some browsers...

Upvotes: 4

Related Questions