Skip to content

Conversation

ZauberNerd
Copy link

The "Minimize Bundle Size" guides explain how to reduce file size by
only importing the neccessary parts of react-router.
I created a small babel plugin to do this transformation automatically.
https://www.npmjs.com/package/babel-plugin-transform-react-router-optimize

The "Minimize Bundle Size" guides explain how to reduce file size by
only importing the neccessary parts of react-router.
I created a small babel plugin to do this transformation automatically.
https://www.npmjs.com/package/babel-plugin-transform-react-router-optimize
@taion
Copy link
Contributor

taion commented Jun 12, 2016

I'm not sure this is a good idea.

In general, people are going to have to do deep imports to get minimum bundle size, and it doesn't make sense to install a Babel plugin for every library I use.

I'd rather people just use a cross-library pattern that they should be familiar with anyway.

@ZauberNerd
Copy link
Author

I agree, that it is painful to install a lot of different babel plugins for all the things I want to use, but that's rather a discussion on how babel is organized.
Also there's the possibility to create "presets", for example here is a "react-optimize" preset, which contains a set of different plugins which affect the performance of react application: https://github.com/thejameskyle/babel-react-optimize (possibly also a good place for the react-router-optimize plugin).

I slightly disagree that people who use react-router should have to write the deep imports themselves. In most react applications I've seen, this wasn't happening.
Referencing files inside a module means accessing an API which was supposed to be private / internal and could break at any point.
react-router has given a statement that they treat their build internals as a public API by creating this guide, but for most other libraries this isn't the case.
With that in mind I'd rather write "cross-library patterns I'm familiar with", which are ES6 destructuring import statements instead of having to do the deep imports myself ;)

@ZauberNerd ZauberNerd closed this Jun 12, 2016
@taion
Copy link
Contributor

taion commented Jun 12, 2016

We need to do a better job of pointing users at the deep imports. They are actually part of our supported API. Possibly we want to move them up one level (e.g. react-router/Link rather than react-router/lib/Link – this is @ryanflorence's idea and it's a good one).

At some point it just gets hard to avoid this pattern for certain libraries, especially when you want to minimize bundle size. history uses this pattern, and it can't avoid doing so.

@lock lock bot locked as resolved and limited conversation to collaborators Jan 19, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants