According to React's blog (https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html), there's a new JSX runtime for Babel:
Depending on your setup, its compiled output may slightly improve the bundle size.
However, it made my bundle size 2% bigger. I was curious, so I dug into the output. The dev version looks like this:
(0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxDEV)("div", {})
And the production version looks like this:
(0,a.jsx)("div",{})
In the React blog's example, they have _jsx as a function instead of a method. This is probably contributing to the 2% file size increase. Is this a Webpack issue? Is it possible to make Webpack optimize this further?
What other reasons could there be for the new runtime making the bundle larger?
There are a few potential reasons that the new JSX runtime could be making your bundle larger:
Your build process may not be properly configured to use the new runtime. If you are not specifying the runtime in your Babel configuration, it may be falling back to the old runtime.
The new runtime may not be fully optimized for your specific use case. It is designed to be a more general-purpose runtime, so it may not be as optimized as the old runtime for your specific codebase.
Your codebase may be using JSX in a way that is not optimized by the new runtime. For example, if you are using a lot of inline JSX, the new runtime may not be able to optimize it as well as the old runtime.
It's also worth noting that a 2% increase in bundle size may not necessarily be significant. In many cases, the benefits of the new runtime (such as improved developer experience and better integration with the React ecosystem) may outweigh the potential increase in bundle size.
If you want to optimize the bundle size further, there are a few things you can try:
Make sure your build process is properly configured to use the new runtime.
Use code splitting and lazy loading to split your code into smaller chunks that can be loaded on demand.
Use a tool like Webpack's tree shaking to remove unused code from your bundle.
Use a tool like Preact or Inferno to reduce the size of your bundle. These libraries are designed to be smaller and faster alternatives to React.