6

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?

Improve this question

2 Answers 2

Reset to default
7

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'm not actually import typescript in my project because it's only use for dev mode. So if you are using webpack and you wont import typescript anywhere then in your project webpack will you tree shaking to eliminate code that don't need for production build so the bundle will not affect.

Improve this answer
1
  • I encounter a very interesting case. First I have some packages in dependencies and build. Then I move these packages into devDependencies and build. The size comparison between the two builds is actually the same because of tree shaking.
    – khoi nguyen
    Commented Mar 8, 2023 at 3:18
3

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.

Improve this answer
2
  • 1
    Thanks but this thread in general and this answer in particular are talking about when dependencies should be used and when devDependencies should be used. It doesn't answer my question: "Do devDependencies affect bundle size?"
    – Liran H
    Commented Jun 23, 2019 at 13:48
  • 2
    If you move your dependency from dependencies to devDependencies or vice versa, you still have the same list of dependencies from webpack PoV, and thus, bundle size is unaffected. If you remove dependency from both places, bundle size change depends on particular dependency -- it might or might not contribute to bundle size.
    – alx
    Commented Jun 23, 2019 at 13:51

Not the answer you're looking for? Browse other questions tagged or ask your own question.