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.

Sign up for GitHub

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

Jump to bottom

Bundle DOM renderers into their individual UMD bundles #7164

Merged
merged 4 commits into from
Aug 9, 2016
Merged

Bundle DOM renderers into their individual UMD bundles #7164

merged 4 commits into from
Aug 9, 2016

Commits on Aug 5, 2016

  1. Bundle DOM renderers into their individual UMD bundles 

    Instead of exposing the entire DOM renderer on the react.js
package, I only expose CurrentOwner and ComponentTreeDevtool which
are currently the only two modules that share __state__ with the
renderers.

Then I package each renderer in its own package. That could allow
us to drop more server dependencies from the client package. It
will also allow us to ship fiber as a separate renderer.

Unminified DEV            after     before
react.js                  123kb     696kb
react-with-addons.js      227kb     774kb
react-dom.js              668kb     1kb
react-dom-server.js       638kb     1kb

Minified PROD             after     before
react.min.js               24kb     154kb
react-with-addons.min.js   37kb     166kb
react-dom.min.js          149kb     1kb
react-dom-server.min.js   144kb     1kb

The total size for react.min.js + react-dom.min.js is +19kb larger
because of the overlap between them right now. I'd like to see
what an optimizing compiler can do to this. Some of that is fbjs
stuff. There shouldn't need to be that much overlap so that's
something we can hunt. We should keep isomorphic absolutely
minimal so there's no reason for other React clones not to use it.
There will be less overlap with Fiber.

However, another strategy that we could do is package the
isomorphic package into each renderer bundle and conditionally
initialize it if it hasn't already been initialized. That way
you only pay an overlap tax when there are two renderers on the
page but not without it. It's also easier to just pull in one
package. The downside is the versioning stuff that the separate
npm package would solve. That applies to CDNs as well.

ReactWithAddons is a bit weird because it is packaged into the
isomorphic package but has a bunch of DOM dependencies. So we have
to load them lazily since the DOM package gets initialized after.
    @sebmarkbage
    sebmarkbage committed Aug 5, 2016
    Configuration menu
    Copy the full SHA
    693bbe2 View commit details
    Browse the repository at this point in the history

  2. Cut out isomorphic dependencies from the renderers 

    These files reaches into isomorphic files.

The ReactElement functions are exposed on the React object anyway
so I can just use those instead.

I also found some files that are not shared that should be in
renderers shared.
    @sebmarkbage
    sebmarkbage committed Aug 5, 2016
    Configuration menu
    Copy the full SHA
    61adf43 View commit details
    Browse the repository at this point in the history

  3. Found a few more shared dependencies 

    renderSubtreeIntoContainer is only used by the DOM renderer.
It's not an addon.

ReactClass isn't needed as a dependency since injection doesn't
happen anymore.
    @sebmarkbage
    sebmarkbage committed Aug 5, 2016
    Configuration menu
    Copy the full SHA
    8fd6831 View commit details
    Browse the repository at this point in the history

  4. Use a shim file to load addons' dependencies on DOM 

    By replacing this intermediate file we can do the lazy loading
without needing any lazy requires. This set up works with ES
modules.

We could also replace the globalShim thing with aliased files
instead for consistency.
    @sebmarkbage
    sebmarkbage committed Aug 5, 2016
    Configuration menu
    Copy the full SHA
    948c5d4 View commit details
    Browse the repository at this point in the history