Create-react-app: Production bundle bigger than dev bundle

[sjahan]

Hi,

This may be a dumb question, but I just noticed that my production bundle is heavier than the development one, does that make sense?
When I use npm start, my bundle.js is 382KB, while when I run npm run build, I get a 600KB main.xxx.js.

I would have thought that the production version would be lighter, but maybe optimizations come with the price of a bigger version?

Thank you by advance!

[gaearon]

No, this is highly unlikely. How are you measuring the size?
Since this is not the case with an empty project, we can only help if you share your project.

[sjahan]

I can't share the source code with you unfortunately, but I can show you the main dependencies.

  "dependencies": {
    "cors": "^2.8.1",
    "express": "^4.15.0",
    "node-sass": "^4.5.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-intl": "^2.2.3",
    "react-redux": "^5.0.3",
    "react-router": "^3.0.2",
    "react-scripts": "0.9.3",
    "redux": "^3.6.0",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "nodemon": "^1.11.0",
    "npm-run-all": "^4.0.2"
  }

As the project is only beginning, it is still very close to the original create-react-app sample.
The only thing is I set up a dynamic language switch with react-intl, maybe this is related because this is really the only thing the project actually does for now, but as I'm not (yet) a react/redux expert, maybe I did it wrong.
In my redux container component for IntlProvider, I have the following:

const mapStateToProps = (state) => {
  addLocaleData(require(`react-intl/locale-data/${state.lang}`));
  return {
    locale: state.lang,
    messages: state.messages
  }
};

Could it come from it?
Another idea: react-scripts and node-sass are dependencies (and not devDependencies) because I need to run them on the target environment (which is Heroku by the way). Perhaps it could come from that?

EDIT: I'm measuring the size by looking at the network tab in Chrome, to check what is downloaded and which size. (It's also that big in my build/static/js folder).

[gaearon]

Are you aware that code like this:

  addLocaleData(require(`react-intl/locale-data/${state.lang}`));

will pull all the locales into your bundle because Webpack can't guess which one it would be?

(This still should affect both dev and prod size, but just to double check.)

[sjahan]

I was definitely quite not aware of this! That explains some of the content I found in the bundle.
Actually, I thought this was the proper way to do it because I read a post on one react-intl's issue and this was the solution for it.
Okay so first, I'll definitely fix that!
Thank you very much :)

[gaearon]

Try to think backwards from end result: how do you want your code to work? Since webpack is not magical, it can’t do something that’s impossible in the browser.

Your code looks synchronous. But it’s only possible to get every locale synchronously if they’re all in the bundle. So this is why webpack puts them all into the bundle.

You could use require.ensure() to load them asynchronously. But this means your code would need to learn to wait until the locale is loaded. The way you wrote it would no longer work because you need to take the network response time into account.

[sjahan]

Well that was just it! (The production bundle is now 277KB and the dev bundle is 338KB).
Thank you very much and please excuse my newbieness about Webpack, coming from Java, I still do some dumb copy-past...
I'm going to answer on the mentioned post because this line of code was apparently not the best answer and it would be too bad that another one falls in this trap.

Thanks again and have a great day!

[gaearon]

No worries! I still don’t understand why the dev bundle did not include the locales though.

[sjahan]

It did include the locales, I'm quite sure I saw the same unwanted languages in the dev bundle because I checked the content of both files.
The production bundle creation should have loaded maybe more dependencies? Or something recursively maybe?

[gaearon]

I don't know. It's impossible to tell without seeing the project.

[fijiwebdesign]

In my case the dev bundle was gzipped while the prod wasn't making it appear larger.