Do devDependencies affect bundle size?

Question

I looked hard, and couldn't find a straight answer to this question.

Do the packages I add as devDependencies actually end up in the production bundle JS file and thus affect its size? Or is it only the dependencies that go into the bundle?

Answer 1

No it will not affect your bundle size because those package are only using in development mode. Let's take an example package like typescript

devDependencies: {
  "typescript": "~3.2.5"
}

So I only need to have typescript compier, linting just in dev mode. And I not actually import typescript in my project because it's only use for dev mode. So if you are using webpack and you are not import typescript anywhere in your project webpack will you tree shaking to eliminate code that are not need for production build so the bundle will not affect.

Answer 2

The answer is not that easy as might look. Here is clarification: https://github.com/webpack/webpack/issues/520#issuecomment-174011824

And adding relevant snippet here:

A browser app built by webpack has no runtime node dependencies, and thus all frontend dependencies should be listed as devDependencies. The dependencies vs devDependencies naming convention stems historically from node being a server side package manager, which was abused into a frontend package manager, and this is why the fields have names that are counter-intutive when applied to frontend dev, and is why every project ever is getting this wrong. It is as far as I can tell harmless to list frontend dependencies under dependencies, but it is wrong.

I hope this answers your question.