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

feat: add slim builds for modern browsers #260

Merged
merged 2 commits into from
Mar 12, 2019

Conversation

nolanlawson
Copy link

fixes #259

This adds dist-modern as proposed in that issue. It also adds some text to the README so that folks know how to use the "slim" build.

@nolanlawson
Copy link
Author

For the record, in my own app this reduces the total cost of the nimble-picker chunk from 46.17kB to 36.04kB (22% reduction), when combined with #257.

screenshot from 2018-12-18 14-00-34

@nolanlawson
Copy link
Author

This PR is complicated by #258; I'd like to solve #258 first.

@nolanlawson
Copy link
Author

I scaled back the ambition of #258 (#258 (comment)), so now I think this PR stands on its own. Assuming the library consumer has their Babel plugins set up correctly, they can use /dist-modern plus babel-plugin-transform-react-remove-prop-types to get the smallest possible production build.

@nolanlawson
Copy link
Author

Rebased and fixed merge conflicts

@nolanlawson
Copy link
Author

I'm starting to wonder if it would make more sense to release a new version of emoji-mart with a breaking change, which is to drop support for old browsers (unless you apply Babel transforms yourself to emoji-mart, in which case they are supported).

@EtienneLem
Copy link
Member

I was wondering the same yesterday. Not too sure what’s the current state of affairs in regard to component libraries. Wouldn’t it be ideal to just provide the most modern version of it and people can transpile it with their already-in-place compiling tool of choice. I guess these usually ignore /node_modules libraries? Or not even?

@nolanlawson
Copy link
Author

@EtienneLem Yeah and we are also already encouraging people to do this to remove the prop-types. How about this:

  • Release dist-modern for now
  • In the next major release, make modern the default

BTW by "modern" I mean "evergreen browsers, no IE11" 🙂. I could make that clearer in the docs.

@nolanlawson
Copy link
Author

Rebased and tweaked the README a bit

@nolanlawson
Copy link
Author

Managed to get the size down by tweaking the .babelrc. The resulting on-disk sizes are:

204K    dist
204K    dist-es
196K    dist-modern

@nolanlawson
Copy link
Author

Just tested this out in my own project, and using the remove-prop-types Babel transform plus this branch, the nimble-picker is down to 35.36kB.
Screenshot from 2019-03-09 09-33-11

nolanlawson added a commit to nolanlawson/emoji-mart that referenced this pull request Mar 10, 2019
feat: add slim builds for modern browsers
nolanlawson added a commit to nolanlawson/emoji-mart that referenced this pull request Mar 10, 2019
feat: add slim builds for modern browsers
@nolanlawson nolanlawson merged commit 558de6a into missive:master Mar 12, 2019
@laurensclaessen
Copy link

@nolanlawson By moving all these "transform-es2015-arrow-functions" values away from the default set of plugins. It seems the legacy-cjs build doesn't make use anymore of this legacy set of plugins.

legacy-cjs is the default dist, but is not compatible anymore with IE11. There are consts and arrow functions in the build. This doesn't really match the README.md statement:

dist is the standard build with the highest level of compatibility.

I noticed your discussion related to evergreen browsers, but it would be nice if this version 2.x could still remain compatible with IE11.

Thanks!

cc @EtienneLem

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.

Slimmer build for modern browsers
3 participants