material-ui icon indicating copy to clipboard operation
material-ui copied to clipboard

[system] Minimize color scheme script

Open siriwatknp opened this issue 3 years ago • 3 comments

To reduce HTML size, the script returns from getInitColorSchemeScript should be minified.

This PR:

  • Move the logic to scripts/colorSchemeScript (source of truth)
  • Run yarn system:minify-color-scheme-script to read the source and minify via terser
  • Put the minified code back to src/cssVars/getInitColorSchemeScript

All the tests are passed, so I believe that the minification is done correctly.


siriwatknp avatar Jun 23 '22 07:06 siriwatknp

Details of bundle changes

@material-ui/core: parsed: -0.14% :heart_eyes:, gzip: -0.09% :heart_eyes: @material-ui/system: parsed: -1.17% :heart_eyes:, gzip: -0.52% :heart_eyes: @mui/joy: parsed: -0.38% :heart_eyes:, gzip: -0.25% :heart_eyes:

Generated by :no_entry_sign: dangerJS against 3122baa97b9eef0cdd837a91bd237f4634aea838

mui-bot avatar Jun 23 '22 07:06 mui-bot

Is this really an issue? I mean how much did we save in bites? Is it worth the complexity added in the code?

It comes from a community suggestion.

Other libraries that minify the script

  • https://github.com/pacocoursey/next-themes/blob/main/src/index.tsx#L184
  • https://github.com/chakra-ui/chakra-ui/blob/e98db2cc02e530c980997353dd4f093da9064593/packages/color-mode/src/color-mode-script.tsx#L18
  • https://github.com/gregberge/xstyled/blob/c35d470656820f7c9cc749eb33e02cf5cea24d26/packages/core/src/colorModes.tsx#L387

Will find out how much it saves.

siriwatknp avatar Aug 15 '22 08:08 siriwatknp

It comes from a https://github.com/mui/material-ui/issues/27651#issuecomment-1123258293.

I was missing this in the PR description.

mnajdova avatar Aug 15 '22 09:08 mnajdova