Using webpack as build tool for React npm package

Question

I've been playing around with webpack and npm registry. I created my own little project. which I published to npm registry. Everything seems to work fine, but there is one thing that worries me.

The file which is built by webpack (lib/index.js) contains almost 2k lines of code while my library is really tiny. I see that it includes two dependencies that I use which are prop-types and detect-browser. They make most of the code. Hover after downloading these two libraries and using them in a test project I would expect them to be somehow deduped by tree-shaking or something like that, but the size of my package is still the same.

Basically, all I'm asking is: does my library includes more code than necessary? It seems like so to me.

I also tried to additionally install prop-types and detect-browser in the test project to see if bundle size will remain the same. Hower the size of my library is still the same and bundle size increased (I expected that redundant libraries will be removed or something).

Andrea Carraro · Accepted Answer · 2017-11-11 15:59:40Z

1

How did you generate the dependency graph?

BTW your package looks fine except for the fact that your are including in you distributed code both the packages you are depending on (prop-types and detect-browser).

In order to avoid that you should mark as external those libraries in your webpack config file. Like:

externals: {
    react: 'react',
    prop-types: 'prop-types',
    detect-browser: 'detect-browser',
}

Just a final (personal) note: give Rollup a try to bundle your libraries. :)

answered Nov 11, 2017 at 15:59

Andrea Carraro

10.6k5 gold badges40 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tomasz Mularczyk Over a year ago

I used webpack-bundle-analyzer for dependency graph. Why libraries like react-bootstrap have only react and react-dom marked as externals? ReactBootstrap is also using prop-types and other libraries as their dependencies. Btw, your snippet is invalid ;)

Andrea Carraro Over a year ago

react-bootstrap has a quite complex build setup. I don't know what's happening in there!

Collectives™ on Stack Overflow

Using webpack as build tool for React npm package

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related