liferay
chore: enable react-compiler babel plugin
This enables the rule and then also suppresses the few instances where it was erroring. All the cases it found didn't seem super problematic, so we can just suppress them for now.
https://liferay.atlassian.net/browse/LPD-26040
😢
+----------------------------+--------------+--------------+------------------------+
| Package | Old Size | New Size | Difference |
+----------------------------+--------------+--------------+------------------------+
| @clayui/card | 175.8 KB | 206.0 KB | ⭡ 30.2 KB (17.17%) |
| @clayui/date-picker | 192.2 KB | 222.1 KB | ⭡ 30.0 KB (15.59%) |
| @clayui/color-picker | 183.4 KB | 212.6 KB | ⭡ 29.2 KB (15.93%) |
| @clayui/pagination-bar | 174.6 KB | 203.2 KB | ⭡ 28.6 KB (16.36%) |
| @clayui/list | 173.7 KB | 201.6 KB | ⭡ 27.9 KB (16.06%) |
| @clayui/multi-select | 179.3 KB | 207.0 KB | ⭡ 27.6 KB (15.41%) |
| @clayui/autocomplete | 175.6 KB | 203.1 KB | ⭡ 27.5 KB (15.65%) |
| @clayui/multi-step-nav | 172.7 KB | 199.8 KB | ⭡ 27.0 KB (15.66%) |
| @clayui/drop-down | 171.0 KB | 197.0 KB | ⭡ 26.0 KB (15.19%) |
| @clayui/pagination | 163.8 KB | 188.2 KB | ⭡ 24.4 KB (14.88%) |
| @clayui/nav | 162.2 KB | 184.9 KB | ⭡ 22.8 KB (14.03%) |
| @clayui/localized-input | 162.8 KB | 185.4 KB | ⭡ 22.6 KB (13.86%) |
| @clayui/core | 162.1 KB | 184.6 KB | ⭡ 22.6 KB (13.92%) |
| @clayui/time-picker | 70.7 KB | 80.0 KB | ⭡ 9.3 KB (13.15%) |
| @clayui/toolbar | 70.8 KB | 79.3 KB | ⭡ 8.5 KB (12.03%) |
| @clayui/upper-toolbar | 71.2 KB | 79.4 KB | ⭡ 8.2 KB (11.50%) |
| @clayui/form | 68.7 KB | 76.2 KB | ⭡ 7.5 KB (10.89%) |
| @clayui/modal | 67.4 KB | 72.7 KB | ⭡ 5.3 KB (7.92%) |
| @clayui/navigation-bar | 72.7 KB | 77.7 KB | ⭡ 5.0 KB (6.92%) |
| @clayui/tabs | 65.2 KB | 70.2 KB | ⭡ 5.0 KB (7.68%) |
| @clayui/slider | 63.3 KB | 67.6 KB | ⭡ 4.2 KB (6.70%) |
| @clayui/panel | 70.2 KB | 74.4 KB | ⭡ 4.2 KB (5.95%) |
| @clayui/tooltip | 66.1 KB | 70.1 KB | ⭡ 4.0 KB (6.04%) |
| @clayui/data-provider | 65.8 KB | 69.6 KB | ⭡ 3.8 KB (5.80%) |
| @clayui/shared | 62.3 KB | 65.9 KB | ⭡ 3.6 KB (5.75%) |
| @clayui/popover | 64.0 KB | 67.6 KB | ⭡ 3.6 KB (5.59%) |
| @clayui/management-toolbar | 7.4 KB | 10.4 KB | ⭡ 3.0 KB (39.82%) |
| @clayui/breadcrumb | 8.2 KB | 11.0 KB | ⭡ 2.8 KB (34.74%) |
| @clayui/alert | 8.0 KB | 10.7 KB | ⭡ 2.8 KB (34.95%) |
| @clayui/charts | 175.9 KB | 178.4 KB | ⭡ 2.6 KB (1.45%) |
| @clayui/label | 6.0 KB | 8.6 KB | ⭡ 2.6 KB (42.51%) |
| @clayui/provider | 6.4 KB | 8.7 KB | ⭡ 2.3 KB (36.03%) |
| @clayui/button | 6.0 KB | 8.2 KB | ⭡ 2.3 KB (38.08%) |
| @clayui/layout | 6.5 KB | 8.7 KB | ⭡ 2.3 KB (34.89%) |
| @clayui/empty-state | 5.1 KB | 7.3 KB | ⭡ 2.2 KB (43.71%) |
| @clayui/sticker | 4.3 KB | 6.4 KB | ⭡ 2.1 KB (47.74%) |
| @clayui/badge | 4.0 KB | 6.0 KB | ⭡ 2.1 KB (51.79%) |
| @clayui/progress-bar | 4.8 KB | 6.9 KB | ⭡ 2.0 KB (42.30%) |
| @clayui/icon | 4.2 KB | 6.2 KB | ⭡ 2.0 KB (48.53%) |
| @clayui/table | 5.3 KB | 7.2 KB | ⭡ 1.9 KB (35.82%) |
| @clayui/css:base | 76.7 KB | 76.7 KB | ⭣ 1 B (-0.00%) |
| @clayui/css:atlas | 83.5 KB | 83.5 KB | ⭣ 2 B (-0.00%) |
| @clayui/link | 4.8 KB | 4.8 KB | -- |
| @clayui/loading-indicator | 4.2 KB | 4.2 KB | -- |
+----------------------------+--------------+--------------+------------------------+
Total Diff: 13%
I tried adding the compiler to babel and our build but the size increase was significant. Not sure why it bloated the size of everything. It claims to optimize the runtime performance and not necessarily the bundle size.
We can still use the eslint rule to catch things but not use the babel plugin
@ethib137 yeah that is odd that those are so big. I don't know if the "stats" github action bundlers all the dependencies as well, so it's possible that "card" is also including "core". I will look into it today though and see if we can isolate the package size to just the package itself without the dependencies
@ethib137 so the reason the sizes are so big is because we are treating each package as an "entry point" so if an existing project brought in @clayui/card it will bring in 175.8 KB of code(dependencies included). It is similar to how BundlePhobia logic works.
We may want to change this to just be the size of the package code itself, OR we explicitly exclude @clayui/* dependnecies since we kind of assume those components are already used on the page.
Oh interesting! If we explicitly exclude @clayui/* dependencies I wonder if that would change the calculations for using react compiler at all?
@ethib137 it does significantly change the sizes when excluding clayui/*
I am gonna try to revamp the stats a bit and fall more in line with our DXP size report too
PR for stats: https://github.com/liferay/clay/pull/6109
This is the new size with react-compiler enabled. I believe it is adding size because it is "auto-memoizing" things, so we can expect more code but it should be more performant.
I am curious if by enabling this we could remove a bunch of useMemo and useCallback
+----------------------------+--------------+--------------+------------------------+
| Package | Old Size | New Size | Difference |
+----------------------------+--------------+--------------+------------------------+
| @clayui/core | 49.3 KB | 61.5 KB | ⭡ 12.2 KB (24.85%) |
| @clayui/card | 5.2 KB | 10.9 KB | ⭡ 5.7 KB (108.78%) |
| @clayui/form | 6.7 KB | 11.9 KB | ⭡ 5.2 KB (77.57%) |
| @clayui/color-picker | 12.4 KB | 17.1 KB | ⭡ 4.7 KB (37.55%) |
| @clayui/drop-down | 10.5 KB | 15.1 KB | ⭡ 4.6 KB (44.20%) |
| @clayui/date-picker | 19.8 KB | 24.0 KB | ⭡ 4.2 KB (21.04%) |
| @clayui/time-picker | 3.3 KB | 7.2 KB | ⭡ 3.9 KB (118.97%) |
| @clayui/pagination | 3.3 KB | 7.2 KB | ⭡ 3.8 KB (115.22%) |
| @clayui/list | 3.8 KB | 7.4 KB | ⭡ 3.7 KB (97.32%) |
| @clayui/modal | 6.1 KB | 9.7 KB | ⭡ 3.6 KB (58.19%) |
| @clayui/tabs | 3.7 KB | 7.1 KB | ⭡ 3.4 KB (90.83%) |
| @clayui/multi-step-nav | 3.2 KB | 6.5 KB | ⭡ 3.2 KB (99.37%) |
| @clayui/autocomplete | 6.8 KB | 10.0 KB | ⭡ 3.2 KB (47.24%) |
| @clayui/navigation-bar | 2.9 KB | 6.0 KB | ⭡ 3.1 KB (107.81%) |
| @clayui/shared | 17.0 KB | 20.0 KB | ⭡ 3.1 KB (18.05%) |
| @clayui/management-toolbar | 1.6 KB | 4.5 KB | ⭡ 2.9 KB (186.30%) |
| @clayui/pagination-bar | 3.3 KB | 6.2 KB | ⭡ 2.9 KB (87.32%) |
| @clayui/slider | 1.8 KB | 4.6 KB | ⭡ 2.9 KB (163.29%) |
| @clayui/breadcrumb | 2.1 KB | 4.8 KB | ⭡ 2.7 KB (128.66%) |
| @clayui/label | 1.4 KB | 4.1 KB | ⭡ 2.7 KB (190.41%) |
| @clayui/toolbar | 2.1 KB | 4.8 KB | ⭡ 2.7 KB (128.03%) |
| @clayui/tooltip | 9.2 KB | 11.9 KB | ⭡ 2.7 KB (28.83%) |
| @clayui/charts | 154.1 KB | 156.7 KB | ⭡ 2.6 KB (1.71%) |
| @clayui/empty-state | 2.0 KB | 4.6 KB | ⭡ 2.6 KB (128.14%) |
| @clayui/panel | 2.8 KB | 5.3 KB | ⭡ 2.6 KB (93.27%) |
| @clayui/alert | 2.0 KB | 4.6 KB | ⭡ 2.5 KB (125.36%) |
| @clayui/upper-toolbar | 930 B | 3.4 KB | ⭡ 2.5 KB (279.68%) |
| @clayui/layout | 2.7 KB | 5.2 KB | ⭡ 2.5 KB (93.45%) |
| @clayui/provider | 2.8 KB | 5.3 KB | ⭡ 2.5 KB (89.06%) |
| @clayui/button | 2.0 KB | 4.6 KB | ⭡ 2.5 KB (122.91%) |
| @clayui/badge | 813 B | 3.2 KB | ⭡ 2.4 KB (308.49%) |
| @clayui/sticker | 1.2 KB | 3.6 KB | ⭡ 2.4 KB (200.57%) |
| @clayui/icon | 793 B | 3.2 KB | ⭡ 2.4 KB (312.61%) |
| @clayui/nav | 877 B | 3.3 KB | ⭡ 2.4 KB (279.48%) |
| @clayui/data-provider | 4.2 KB | 6.6 KB | ⭡ 2.4 KB (56.34%) |
| @clayui/table | 2.2 KB | 4.5 KB | ⭡ 2.3 KB (106.92%) |
| @clayui/multi-select | 5.6 KB | 5.6 KB | ⭣ 1 B (-0.02%) |
| @clayui/css:atlas | 83.5 KB | 83.5 KB | -- |
| @clayui/css:base | 76.7 KB | 76.7 KB | -- |
| @clayui/link | 1.7 KB | 1.7 KB | -- |
| @clayui/loading-indicator | 1.1 KB | 1.1 KB | -- |
WARNING: Total size change was greater than +/- 5%
| @clayui/localized-input | 1.9 KB | 1.9 KB | -- |
| @clayui/popover | 2.9 KB | 2.9 KB | -- |
| @clayui/progress-bar | 1.2 KB | 1.2 KB | -- |
+----------------------------+--------------+--------------+------------------------+
One interesting note with the compiler enabled, is that I noticed it removed "useMemo" from some of the packages I looked at the built file.
That is interesting. It's a huge difference in size though, so until we can show evidence that there are sizeable performance improvements, we should probably avoid using the compiler.
I am going to send a separate PR just for the eslint part and merge it(https://github.com/liferay/clay/pull/6111). I want to keep this up for info on the babel part and we can revisit once we know how to check the performance gains.
Oh you know what... I think the bloat in every package is due to bundling react-compiler-runtime. Really, this would be served by DXP, similar to react and react-dom. I tried putting it as an external, but still had same results which seem suspicious. I'll keep looking..
Oh if react-compiler-runtime is bundled that would account for it. Yeah... let's see what else you can find out.
It looks a little better but still seeing bloated packages. We just need to find a way to appropriately test performance
| Package | Old Size | New Size | Difference |
+----------------------------+--------------+--------------+------------------------+
| @clayui/core | 48.8 KB | 59.1 KB | ⭡ 10.3 KB (21.13%) |
| @clayui/card | 5.2 KB | 8.7 KB | ⭡ 3.4 KB (65.55%) |
| @clayui/form | 6.7 KB | 9.7 KB | ⭡ 3.0 KB (44.79%) |
| @clayui/color-picker | 12.4 KB | 14.9 KB | ⭡ 2.5 KB (19.97%) |
| @clayui/drop-down | 10.5 KB | 12.9 KB | ⭡ 2.4 KB (23.40%) |
| @clayui/date-picker | 19.8 KB | 21.7 KB | ⭡ 1.9 KB (9.51%) |
| @clayui/time-picker | 3.3 KB | 5.1 KB | ⭡ 1.8 KB (53.47%) |
| @clayui/pagination | 3.3 KB | 5.0 KB | ⭡ 1.7 KB (50.19%) |
| @clayui/list | 3.8 KB | 5.3 KB | ⭡ 1.5 KB (40.16%) |
| @clayui/modal | 6.1 KB | 7.6 KB | ⭡ 1.4 KB (23.19%) |
| @clayui/tabs | 3.7 KB | 5.0 KB | ⭡ 1.2 KB (33.12%) |
| @clayui/autocomplete | 6.8 KB | 7.9 KB | ⭡ 1.1 KB (16.51%) |
| @clayui/multi-step-nav | 3.2 KB | 4.3 KB | ⭡ 1.1 KB (32.91%) |
| @clayui/navigation-bar | 2.9 KB | 3.9 KB | ⭡ 1018 B (34.28%) |
| @clayui/shared | 17.0 KB | 17.9 KB | ⭡ 922 B (5.31%) |
| @clayui/pagination-bar | 3.3 KB | 4.1 KB | ⭡ 759 B (22.27%) |
| @clayui/slider | 1.8 KB | 2.5 KB | ⭡ 714 B (39.71%) |
| @clayui/management-toolbar | 1.6 KB | 2.3 KB | ⭡ 713 B (44.59%) |
| @clayui/charts | 154.1 KB | 154.7 KB | ⭡ 664 B (0.42%) |
| @clayui/breadcrumb | 2.1 KB | 2.7 KB | ⭡ 580 B (26.81%) |
| @clayui/label | 1.4 KB | 1.9 KB | ⭡ 510 B (35.17%) |
| @clayui/tooltip | 9.2 KB | 9.7 KB | ⭡ 509 B (5.38%) |
| @clayui/toolbar | 2.1 KB | 2.6 KB | ⭡ 504 B (23.43%) |
| @clayui/empty-state | 2.0 KB | 2.5 KB | ⭡ 448 B (21.62%) |
| @clayui/panel | 2.8 KB | 3.1 KB | ⭡ 402 B (14.25%) |
| @clayui/alert | 2.0 KB | 2.4 KB | ⭡ 393 B (18.88%) |
| @clayui/provider | 2.8 KB | 3.2 KB | ⭡ 374 B (12.95%) |
| @clayui/button | 2.0 KB | 2.4 KB | ⭡ 347 B (16.59%) |
| @clayui/upper-toolbar | 930 B | 1.2 KB | ⭡ 335 B (36.02%) |
| @clayui/layout | 2.7 KB | 3.0 KB | ⭡ 324 B (11.67%) |
| @clayui/badge | 813 B | 1.0 KB | ⭡ 253 B (31.12%) |
| @clayui/sticker | 1.2 KB | 1.4 KB | ⭡ 229 B (18.51%) |
| @clayui/icon | 793 B | 1019 B | ⭡ 226 B (28.50%) |
| @clayui/data-provider | 4.2 KB | 4.5 KB | ⭡ 223 B (5.14%) |
| @clayui/nav | 877 B | 1.1 KB | ⭡ 214 B (24.40%) |
| @clayui/table | 2.2 KB | 2.3 KB | ⭡ 130 B (5.85%) |
| @clayui/multi-select | 5.6 KB | 5.6 KB | ⭣ 1 B (-0.02%) |
| @clayui/css:atlas | 83.5 KB | 83.5 KB | -- |
| @clayui/css:base | 76.7 KB | 76.7 KB | -- |
| @clayui/link | 1.7 KB | 1.7 KB | -- |
| @clayui/loading-indicator | 1.1 KB | 1.1 KB | -- |
| @clayui/localized-input | 2.5 KB | 2.5 KB | -- |
| @clayui/popover | 2.9 KB | 2.9 KB | -- |
| @clayui/progress-bar | 1.2 KB | 1.2 KB | -- |
+----------------------------+--------------+--------------+------------------------+