Proposal: Implement optimizations for JSX, Hooks and Code Splitting

[developit]

Summary

Over the past few months, we've been working with the Next.js team to implement various transparent optimizations. There are three that seem highly applicable to Gatsby.

The Optimizations

Transparent JSX Optimization

This Babel transform changes JSX output to avoid thousands of JavaScript property accesses in compiled JSX and reduces the impact of JSX on JavaScript parsing time.

Optimize Hook Destructuring
This Babel plugin implements my original recommendation from the V8 team's investigation into the performance impact of Array destructuring in React Hooks. It's transparent to the developer, and has the added benefit of producing significantly less code when Babel is configured in strict mode.

Granular Code Splitting
Gatsby and Next both shared similar SplitChunks configurations up until recently. @atcastle proposed and subsequently landed an implementation of a more granular chunking strategy that has been shown to load less code per-entry for common cases by producing additional shared dependency chunks loaded on-demand.

Motivation

Collectively, bringing these optimizations to Gatsby would represent a nontrivial improvement in output and performance.

Further Optimization

It may also be possible to implement the module/nomodule pattern (#2114) using a Child Compiler technique similar to what @janicklasralph implemented in Next. His work was based on babel-esm-plugin, which I'm working to backport the generalized improvements into. This would enable Gatsby to benefit from @babel/preset-modules, especially true here since Babel is already being used to transform node_modules (yay!).

/cc @wardpeet @spanicker

[wardpeet]

Awesome @developit, thanks for opening this issue. The babel plugins should be low effort to implement. Module/no-module was stalled because of our work on gatsby cloud. I'll continue with it after the jobs api, which should be in a week or so.

Nonetheless, other core members could do the babel transformations plugins if they can get to it. The granular chunks we need to check if we can implement it as an experiment or as a plugin for now.

[developit]

Sounds good. I like the idea of testing out the new chunking stuff as a plugin.

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[wardpeet]

This has only been partially fixed, I still have to add the 2 babel plugins

[moonmeister]

In #22253 it was mentioned that react/react-dom were move to a framework package. Does this apply if we're using preact? If not, is this possible?

[moonmeister]

Okay, after some attempts to do this I did manage to get preact working (i think). But It'd be nivce if there was a better way we could use to update the preact plugin.

const FRAMEWORK_BUNDLES = [
  `preact`,
  `react`,
  `react-dom`,
  `scheduler`,
  `prop-types`,
];

exports.onCreateWebpackConfig = ({ stage, getConfig, actions }) => {
  if (stage === "build-javascript") {
    const config = getConfig();

    config.optimization.splitChunks.cacheGroups.framework.test = new RegExp(
      `(?<!node_modules.*)[\\\\/]node_modules[\\\\/](${FRAMEWORK_BUNDLES.join(
        `|`
      )})[\\\\/]`
    );

    actions.replaceWebpackConfig(config);
  }
};