Libraries built using this library get way too big due to bundling.

[markusenglund]

The contents of the src/lib-folder + dependencies are bundled and minified with webpack into the build folder. The build folder is then served as the final package. This is bad for the following reasons:

• By bundling external dependencies together with the code you remove the ability for projects to have the same dependency used by many different packages. There will be duplication. For example: react-under-construction has prop-types as a dependency. Lots of other packages also have prop-types as a dependency. A project that uses many such packages would normally only have one instance of prop-types in their final bundle even though it's used by many different packages in the project. But because react-under-construction has prop-types already bundled into itself, prop-types will be duplicated in the final bundle of the users project. This can increase final bundle size substantially which is bad.
• Some extra code - I don't know what it does - gets added to the bundle which gives an extra 5 kb or so gzipped. Maybe it's a polyfill? Whatever it is, it is not needed. So if you make a library with nothing in it using create-react-library (by making Example.js and SecondExample.js into empty divs), the gzipped size of that will still be 4.95 kb! To put it in perspective, that's more than the entire react-router package-size. react-under-construction is 6.5 kb gzipped, it should be around 1.5 kb. Very bad.

What this library should be doing: Use babel to transpile the es6+jsx files in the src/lib-folder to plain old es5 and that's it. It shouldn't do any bundling or minifying (except for maybe a UMD build, I have no idea how that works). The react devs who will use the final package already bundle and minify their app so it doesn't have to be done by this library.

[DimiMikadze]

Hi @yogaboll, thanks for reporting.

i see your point, but i don't think it happens because we minify/bundle the code for production.

create-react-app is loading polyfills, Promise whatwg-fetch object-assign and raf in to production bundle, which i totally agree we shouldn't load, so i'll remove them now.

regarding dependencies like prop-types i guess while working on library, we should add them as a peerDependencies so if it's already provided by application, we won't install it.

what you think?

[DimiMikadze]

https://github.com/UdiliaInc/create-react-library/commit/cd4422078766e1cb32378f117ae01ea423091c7b

[markusenglund]

Removing the polyfills seems to have fixed my first complaint. I agree that minifying and bundling the code in src/lib isn’t an issue. However, bundling together the dependencies definitely is.

Prop-types is a bit of a special case as it could reasonably be either a dependency or a peerDependency. However, Dan Abramov recommends having it as a regular dependency.

For other dependencies, it’s pretty clear that you should not import them as peerDependencies. Let’s say my library uses the package react-draggable as a peerDependency. People who use my library would then have to install that separately since peerDependencies are not automatically installed. Now let’s say my library uses react-draggable version 2.0.0, which is an old version. Then the user would have to specifically install version 2, which would confuse some. They would have to do that for every dependency that my library uses, which would be non-standard and a bit confusing.

[EdgardosReis]

what about a new script called "export" for example, that creates a folder with the files package.json, README.md, LICENCE, index.js and all the other lib contents and transpile to ES5 the js files. It can minify but not important in this context as stated by @yogaboll.

[markusenglund]

That would work. So do you mean duplicating the readme, license etc? I'm guessing that would not be necessary.

[EdgardosReis]

yeah, I didn't explain my use case and is probably a bit offtopic. I can't publish my lib to npm and don't have a private package repository so what I would want is, in the app (a non ejected CRA), add a dependency in package.json to my library like: "dependencies": { "my-lib": "file:./src/libs/my-lib", } And then just execute npm install in my app, that's why I would need the package.json of the library and no dependencies bundled.

[markusenglund]

Ok, I don't know how that would work exactly. The npm docs have some info on different ways to depend on packages: https://docs.npmjs.com/files/package.json#urls-as-dependencies

[DimiMikadze]

Guys sorry for late response.

@EdgardosReis i think, to modify or add new functionality for use case like yours will add extra layer of complexity/uncertainty to this starter kit, because in the most cases we want our library to be published on public or private NPM.

If there's demand for it and someone will modify create-react-library to support this kind of functionality, we can create separate branch for it.