What problem does this feature solve?

use https://github.com/rotemdan/lzutf8.js lib to compress hash, the hash will be shorter

What does the proposed API look like?

it's sfc playground's optimization, don't have an API.

if the Components are large, the base64 hash will be large too, we can use lzutf8 to compress them.

normal btoa data: https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8ZGl2PkFwcDwvZGl2PlxuICA8aDE+e3sgY291bnQgfX08L2gxPlxuICA8YnV0dG9uIEBjbGljaz1cIkRvQ2xpY2tcIj5cbiAgICBBZGQgNVxuICA8L2J1dHRvbj5cbiAgPGhyIC8+XG5cdDxDb21wMT48L0NvbXAxPlxuICA8aHIgLz5cblx0PENvbXAyPjwvQ29tcDI+XG48L3RlbXBsYXRlPlxuPHNjcmlwdCBzZXR1cD5cbiAgaW1wb3J0IHsgcmVmIH0gZnJvbSAndnVlJ1xuICBpbXBvcnQgQ29tcDEgZnJvbSAnLi9Db21wMS52dWUnXG4gIGltcG9ydCBDb21wMiBmcm9tICcuL0NvbXAyLnZ1ZSdcblx0Y29uc3QgY291bnQgPSByZWYoMClcbiAgZnVuY3Rpb24gRG9DbGljaygpe1xuICAgIGNvdW50LnZhbHVlICs9IDVcbiAgfVxuPC9zY3JpcHQ+IiwiQ29tcDEudnVlIjoiPHRlbXBsYXRlPlxuICA8ZGl2PkFwcDwvZGl2PlxuICA8aDE+e3sgY291bnQgfX08L2gxPlxuICA8YnV0dG9uIEBjbGljaz1cIkRvQ2xpY2tcIj5cbiAgICBBZGQgM1xuICA8L2J1dHRvbj5cbjwvdGVtcGxhdGU+XG48c2NyaXB0IHNldHVwPlxuICBpbXBvcnQgeyByZWYgfSBmcm9tICd2dWUnXG5cdGNvbnN0IGNvdW50ID0gcmVmKDApXG4gIGZ1bmN0aW9uIERvQ2xpY2soKXtcbiAgICBjb3VudC52YWx1ZSArPSAzXG4gIH1cbjwvc2NyaXB0PiIsIkNvbXAyLnZ1ZSI6Ijx0ZW1wbGF0ZT5cbiAgPGRpdj5BcHA8L2Rpdj5cbiAgPGgxPnt7IGNvdW50IH19PC9oMT5cbiAgPGJ1dHRvbiBAY2xpY2s9XCJEb0NsaWNrXCI+XG4gICAgQWRkIDEwXG4gIDwvYnV0dG9uPlxuPC90ZW1wbGF0ZT5cbjxzY3JpcHQgc2V0dXA+XG4gIGltcG9ydCB7IHJlZiB9IGZyb20gJ3Z1ZSdcblx0Y29uc3QgY291bnQgPSByZWYoMClcbiAgZnVuY3Rpb24gRG9DbGljaygpe1xuICAgIGNvdW50LnZhbHVlICs9IDEwXG4gIH1cbjwvc2NyaXB0PiJ9

use lzutf8: https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8ZGl2PkFwcDwvxAnFEmgxPnt7IGNvdW50IH19PC9oMcYYYnV0dG9uIEBjbGljaz1cIkRvQ8QKXCLFHyAgQWRkIDXFKi/GK8dPciAvPlxuXHQ8Q29tcDE+PC/GCNMdMscdMj5cbjwv6wCoPHNjcmlwdCBzZXR1cMU6aW1wb3J0IHsgcmVmIH0gZnJvbSAndnVlJ8sdxWjHGy7GduQBBNAjMs0jMscjXHRjb25zdOcBCD3EaCgwKcQ7ZnVuY3Rpb24g5wEBKCl7xBcgxisudmFsdWUgKz3mAQx95ADK5gC+PiIsIukAhf8Bif8Bif8BiWRkIDPvAYn/AU/7AU//AQn/AQnkAQnlAIzzAQnlAWv/AQn/AQn/AQlkZCAxMP8BCv8BCv8BCv8BCu8BCuYAje0BC30=

they are generated from the content:

{"App.vue":"<template>\n  <div>App</div>\n  <h1>{{ count }}</h1>\n  <button @click=\"DoClick\">\n    Add 5\n  </button>\n  <hr />\n\t<Comp1></Comp1>\n  <hr />\n\t<Comp2></Comp2>\n</template>\n<script setup>\n  import { ref } from 'vue'\n  import Comp1 from './Comp1.vue'\n  import Comp2 from './Comp2.vue'\n\tconst count = ref(0)\n  function DoClick(){\n    count.value += 5\n  }\n</script>","Comp1.vue":"<template>\n  <div>App</div>\n  <h1>{{ count }}</h1>\n  <button @click=\"DoClick\">\n    Add 3\n  </button>\n</template>\n<script setup>\n  import { ref } from 'vue'\n\tconst count = ref(0)\n  function DoClick(){\n    count.value += 3\n  }\n</script>","Comp2.vue":"<template>\n  <div>App</div>\n  <h1>{{ count }}</h1>\n  <button @click=\"DoClick\">\n    Add 10\n  </button>\n</template>\n<script setup>\n  import { ref } from 'vue'\n\tconst count = ref(0)\n  function DoClick(){\n    count.value += 10\n  }\n</script>"}

lzutf8.decompress can also decompress Base64 generated by btoa, so old sfc-url works too.

lzutf8.decompress(Base64Str, { inputEncoding: 'Base64' })

While this results in shorter URLs, lzutf8 seems pretty heavy for this purpose (35kb minified). I don't think the long URLs cause any intrinsic problems so it doesn't seem to be worth it.