Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add es modules and update to babel 7 #10

Merged
merged 1 commit into from
May 29, 2019
Merged

Conversation

vslutov
Copy link
Contributor

@vslutov vslutov commented May 15, 2019

Hello, thanks for your work, this repository is awesome!

To improve awesomeness, I propose add an es modules into the build.

Webpack>=4 and rollup.js can use tree-shaking with this type of modules. So simple import { CaretRight } from 'react-bytesize-icons' will increase bundle size by tiny bytes. Now it grows at 5 KB. And it's much easier than #9, but that way will be work fine too (can be usefull, if your bundler doesn't support tree shaking).

This commit:

  • Update Babel version to 7
  • Replace babel preset es2015 to env (now supports only this one)
  • Add es module, supported by webpack >=4: additional folder esm in project root.
  • Fix bug: replace prepublish to prepublishOnly (prepublish run on EVERY
    install, prepublishOnly only before upload to npm, see more:
    https://docs.npmjs.com/misc/scripts )

So, after this commit, Webpack>=4 will use a tree-shaking, when simple
import: import { CaretRight } from 'react-bytesize-icons'.

I have tested this method on a create-react-app with an import of a single icon. Size of a minified imported code:

  • An old version import { CaretRight } from 'react-bytesize-icons':
    5.75 KB gzipped.
  • An old version
    import CaretRight from 'react-bytesize-icons/CaretRight':
    272 B gzipped.
  • A new version import { CaretRight } from 'react-bytesize-icons': 229 B gzipped.
  • A new version import CaretRight from 'react-bytesize-icons/CaretRight':
    271 B gzipped.

This commit:
- Update Babel version to 7
- Replace babel preset es2015 to env (now supports only this one)
- Add es module, supported by webpack >=4
- Fix bug: replace prepublish to prepublishOnly (prepublish run on EVERY
  install, prepublishOnly only before upload to npm, see more:
  https://docs.npmjs.com/misc/scripts )

So, after this commit, Webpack>=4 will use a tree-shaking, when simple
import: `import { CaretRight } from 'react-bytesize-icons'`.

It's much easier then `import CaretRight from 'react-bytesize-icons/CaretRight'`.
But this way will be work fine too. and can be usefull, if you don't use
es modules.

My benchmark (Create-react-app application) show this result:

- An old version `import { CaretRight } from 'react-bytesize-icons'`:
  5.75 KB gzipped.
- An old version
  `import CaretRight from 'react-bytesize-icons/CaretRight'`:
  255 B gzipped.
- A new version `import { CaretRight } from 'react-bytesize-icons'`: 231
  B gzipped.
- A new version `import CaretRight from 'react-bytesize-icons/CaretRight'`:
  295 B gzipped.
@Kilian
Copy link
Owner

Kilian commented May 15, 2019

This looks really good @vslutov! Let me test it and then I'll merge it. I have a pretty busy week so if I don't get to it in the next 7 or so days, please bug me about it.

@vslutov
Copy link
Contributor Author

vslutov commented May 28, 2019

Hi, @Kilian ! You asked me to remain about this PR.

@Kilian Kilian merged commit 92349d3 into Kilian:master May 29, 2019
@Kilian
Copy link
Owner

Kilian commented May 29, 2019

released as v0.10.0, thanks @vslutov!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants