Refactor: function name createElement is 12 bytes too long

This issue has been created since 2022-09-01.

Wouldn't it be great for bundle sizes around the world to be reduced from 13 bytes per element where jsx transposes a 13 character function name down to a single byte function name called 'c' or 'e' (12 bytes per node rendered sounds like huge savings to me)

I am sure there are crazy people out there directly calling createElement, so keep the function name there and fix the jsx transpiler to use the one byte function name for all the normal people who never write a lick of createElement.

Can this be looked into or advise me on where I can hijack my jsx transpiler to do this globally. I want to see just how much savings I have on a 7 year old application with over 1400 components and probably at least 14mb of gzipped bundles chunked out.

Thanks for being awesome react maintainers!

Just close if you think this is a garbage idea. I'm just trying to save 12 bytes " n nodes in their entire application. Maybe it could save some apps 100kb unminified if they have a large enough dependency tree of JSX output.

Next my mission is to find a webpack plug in to rename react globally to an alias like R. so everytime webpack imports react I'll save 4 more bytes (that's not your problem) but if I got both the library and create Element down to two bytes from previously 18 bytes per create element call. That's what I am interested in seeing just how many create Elements are in my bundle and if it reduces it by 100kb or 30kb gzipped I think that's a win in my book.

I'm sure my calculations are not right on how many createElement calls there are in some of my apps, but very verbose html apps with huge imports of very Dom heavy jsx trees could probably benefit from a 2 byte package and function call.

eps1lon wrote this answer on 2022-09-01

There is a Babel plugin that makes sure it just ends up as createElement instead of React.createElement in the bundle at which point you can minify the code which will end up creating a function name with as few letters as possible. If you're using the automatic JSX runtime you already get a function call without property access i.e. minimal bytes.

But these optimizations are negligible compared to having 14mb of gzipped JS. The only thing you're making smaller is the uncompressed size since gzip will already compress often repeated strings better (e.g. React.createElement)

davidrenne wrote this answer on 2022-09-01

@eps1lon thanks for the info, I'll check out that babel plugin I've never found and fork and play with it. Yea our react app isn't public on internet so we have less latency for downloads and is lazy loaded in many areas. I still wanted to see how much can be decreased though because I know one bloated area of our app was a ton of forms and copy paste coding with lots of Dom and that became like 8mb compressed so that became it's own chunk at least out of our main pipeline.

Have a great weekend! What are you currently focusing on with the react repo personally?

More Details About Repo
Owner Name facebook
Repo Name react
Full Name facebook/react
Language JavaScript
Created Date 2013-05-24
Updated Date 2022-09-26
Star Count 195293
Watcher Count 6655
Fork Count 40426
Issue Count 1113


Issue Title Created Date Comment Count Updated Date
Animation component is full width? 4 2021-11-10 2022-08-24
ERROR mtp: fatal error LIBUSB_ERROR_TIMEOUT on D810 2 2021-09-25 2022-05-26
Add support for Node JS 0 2022-01-14 2022-09-11
Test Sprites/sprdma/sprdma20 fails 0 2022-07-05 2022-08-29
How to run different sample scene 4 2022-01-06 2022-09-21
Modify JSON filenames to include technique IDs 5 2021-02-02 2022-09-03
Unable to filter on relationship defined with fragment 0 2022-05-21 2022-09-16
Feature: Add `cond` and/or `case` expression syntax 2 2022-05-21 2022-09-16
请问工具箱的春哥附体的命令行参数是什么? 0 2021-11-07 2022-08-30
How to use js cdn with astro 3 2022-06-17 2022-07-19
condition `odo deploy` information in `odo init` output 0 2022-03-09 2022-08-22
[Enhancement] Notifications 2 2022-05-22 2022-09-02
error: 7146760:error:1e000065:Cipher functions:OPENSSL_internal:BAD_DECRYPT:../../third_party/boringssl/src/crypto/fipsmodule/cipher/e_aes.c:1090: 7146760:error:1000008b:SSL routines:OPENSSL_internal:DECRYPTION_FAILED_OR_BAD_RECORD_MAC:../../third_party/b 2 2022-02-03 2022-07-21
Error on installation using brew: non-checksummed download not supported (0.10) 6 2021-01-07 2022-09-11
Stock Portfolio Gain/Loss 5 2022-08-24 2022-09-14
Stop turning limits on by default 0 2022-09-15 2022-09-26
本地启动后样式失效了 5 2021-04-18 2021-12-30
Make it possible to set hibernation schedule for Gardener clusters 5 2022-01-10 2022-08-22
[android] can't connect to nodes, can't recover session context error="unknown session 2 2022-02-02 2022-07-25
Remove parse-time interpolation 0 2022-07-21 2022-09-18
RequestBuilder.gzip is marked as Deprecated incorrectly 0 2022-06-22 2022-09-02
由于文件size定义为int,32位程序处理大文件可能溢出 1 2022-04-25 2022-09-21
N1做旁路由,手机,电脑可以正常访问油管,但是Google TV就不行 5 2021-09-22 2022-09-21
星球日报odaily分支fix后抓取有遗漏 4 2022-01-13 2022-09-14
[Feature]: Support percent as a new column in the table widget 0 2022-05-09 2022-09-07
Public taxonomy terms are not searched by default 0 2021-04-22 2022-07-24
Mark lines that have changed since last git commit 0 2022-04-04 2022-09-25
Dotty support (Scala 3.0.0-M2) 0 2020-12-01 2022-09-25
Improve tutorial overall 0 2021-06-30 2022-09-23
Document the latest supported version of Node 1 2022-01-25 2022-07-24
[Epic] Ingesting trusted and untrusted data into protected-b environment 0 2022-02-04 2022-09-04
[question] Could't get "aarch64-linux-gnu" in libcurl 0 2021-12-10 2022-09-10
LATEST_STABLE Edge driver might not be available for Linux 2 2021-11-23 2022-08-20
[Feature] Please let us configure keyboard shortcuts for media playback 1 2021-11-16 2022-09-20
Refactoring Speedy 0 2021-11-12 2022-01-10 0 2022-01-09 2022-01-03 0 2022-01-09 2022-01-23
Admin | Compliance detail request flow missing from governance components 1 2021-04-28 2022-09-15
Added ursa to the core.ubuntu.dockerfile install 7 2021-08-18 2022-09-19
Why does omitting the ; in a C++ notebook cause the variable to be printed? 0 2019-02-19 2022-09-06
Get an error on popping view while picker is scrolling. 4 2021-03-13 2022-09-26
Breaking change for data import from MS-SQL on Windows in RStudio 2021.09.2+382 1 2022-01-19 2022-08-30
Is it possible to batch process multiple fonts to fix one wrong glyph location? 0 2022-01-24 2022-09-11
How to convert faces to coresponding x,y,z of the vertices? 2 2022-08-08 2022-09-19
Error while cloning private submodule with PAT 0 2021-09-21 2022-07-10
Configuration File: Environment Variable Interpolation 1 2022-06-21 2022-09-25
"Ready" not available in 1.8.x 2 2021-03-23 2022-09-19
Evil mode for cabal solver? 7 2022-06-18 2022-08-29
tfjs-examples parcel build appear broken 1 2022-06-07 2022-09-25
Non-voting members for stand-by backups 12 2018-12-27 2022-09-19