Changing a single word reduced our app main bundle size from 1.2MB to 700KB.

During my work on makers.bolt.fun, I noticed that the main js bundle for the app had a size of 1.2MB. Which is not really great for the app's loading speed.

And it was quiet strange honestly, because I was already using React lazy loading for each page, and the main page didn't import any "heavy" module. So this didn't make much sense.

So I spun up the source map explorer, and tried to figure out what was the cause of this.
And it turned out to be something really simple...

In my projects, I usually use a mocks-server to help me build the UIs without needing to wait for the back-end devs to deploy the api online.
And for that I usually use msw library together with some other libraries for generating fake data like ChanceJs

And I was using that in this project too.
The way I was importing it was the same way as the docs say:

if (process.env.NODE_ENV === 'development') {
    const { worker } = require('./mocks/browser') 
    worker.start()
}

And I assumed that importing it this way would automatically exclude it from the production build.
But I was wrong...
It was being included in the main bundle all the times. Together with all the mock data and fake data generators. Which resulted in an extra 500KB in the bundle size!

All I had to do to fix this was using import() instead of require(), and just like that the problem was solved!!

So watch out for this to make sure you don't make this same mistake as me.