perf: avoid parseRequest

[bluwy]

Description

ref #14420 (comment)

Avoid parseRequest function and use plain regex instead.

Perf link too long that it doesn't work :( Here's another benchmark: https://jsperf.app/nikobo

In case that ever fails again, here's the benchmark code:

Details

// Setup
// ufo
function parseQuery(parametersString = "") {
  const object = {};
  if (parametersString[0] === "?") {
    parametersString = parametersString.slice(1);
  }
  for (const parameter of parametersString.split("&")) {
    const s = parameter.match(/([^=]+)=?(.*)/) || [];
    if (s.length < 2) {
      continue;
    }
    const key = decodeQueryKey(s[1]);
    if (key === "__proto__" || key === "constructor") {
      continue;
    }
    const value = decodeQueryValue(s[2] || "");
    if (object[key] === undefined) {
      object[key] = value;
    } else if (Array.isArray(object[key])) {
      (object[key]).push(value);
    } else {
      object[key] = [object[key], value];
    }
  }
  return object;
}
const PLUS_RE = /\+/g;
function decodeQueryKey(text) {
  return decode(text.replace(PLUS_RE, " "));
}
function decodeQueryValue(text) {
  return decode(text.replace(PLUS_RE, " "));
}
function decode(text = "") {
  try {
    return decodeURIComponent("" + text);
  } catch {
    return "" + text;
  }
}

// vite
const requestQuerySplitRE = /\?(?!.*[/|}])/
function parseRequest(id){
  const [_, search] = id.split(requestQuerySplitRE, 2)
  if (!search) {
    return null
  }
  return Object.fromEntries(new URLSearchParams(search))
}

const workerRe = /(\?|&)worker(?:&|$)/
const urlRe = /(\?|&)url(?:&|$)/
const rawRe = /(\?|&)raw(?:&|$)/

// data
const urls = [
  '/foo/bar.js',
  '/foo/bar.js?worker',
  '/foo/bar.js?url',
  '/foo/bar.js?worker&url',
  '/foo/bar.js?raw',
  ''
]
  .join('__')
  .repeat(100)
  .split('__')

// ufo test
let a = 0, b = 0, c = 0, d = 0
for (const url of urls) {
  let [_, search] = url.split(requestQuerySplitRE, 2)
  if (!search) continue
  search = '?' + search
  const query = parseQuery(search)
  if (!query) continue
  if (query.worker != null) a++
  else if (query.url != null) b++
  else if (query.raw != null) c++
  else d++
}
console.log(a, b, c, d)

// regex test
let a = 0, b = 0, c = 0, d = 0
for (const url of urls) {
  let [_, search] = url.split(requestQuerySplitRE, 2)
  if (!search) continue
  search = '?' + search
  if (workerRe.test(search)) a++
  else if (urlRe.test(search)) b++
  else if (rawRe.test(search)) c++
  else d++
}
console.log(a, b, c, d)

// parseRequest test
let a = 0, b = 0, c = 0, d = 0
for (const url of urls) {
  const query = parseRequest(url)
  if (!query) continue
  if (query.worker != null) a++
  else if (query.url != null) b++
  else if (query.raw != null) c++
  else d++
}
console.log(a, b, c, d)

The result is that the regex version is roughly 70% faster.

Additional context

I made individual commits removing the usage of parseRequest (note: I messed up the name in the 3rd commit)

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines, especially the Pull Request Guidelines.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Update the corresponding documentation if needed.
• Ideally, include relevant tests that fail without this PR but pass with it.

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[bluwy]

/ecosystem-ci run

[vite-ecosystem-ci]

📝 Ran ecosystem CI on c9ce9c3: Open

suite	result	latest scheduled
analogjs	✅ success	✅ success
astro	✅ success	✅ success
histoire	✅ success	❌ failure
ladle	✅ success	✅ success
laravel	❌ failure	❌ failure
marko	✅ success	✅ success
nuxt	✅ success	✅ success
nx	✅ success	✅ success
previewjs	✅ success	✅ success
qwik	❌ failure	✅ success
rakkas	✅ success	✅ success
remix	❌ failure	undefined undefined
sveltekit	✅ success	✅ success
unocss	✅ success	❌ failure
vike	❌ failure	❌ failure
vite-plugin-pwa	✅ success	✅ success
vite-plugin-react	✅ success	✅ success
vite-plugin-react-pages	✅ success	✅ success
vite-plugin-react-swc	✅ success	✅ success
vite-plugin-svelte	✅ success	✅ success
vite-plugin-vue	✅ success	✅ success
vite-setup-catalogue	✅ success	✅ success
vitepress	✅ success	❌ failure
vitest	✅ success	❌ failure

[patak-cat]

For reference to others, we already depend on the order of query suffixes in other cases, like in html proxies. See

vite/packages/vite/src/node/plugins/html.ts

Line 46 in bdb826c

const htmlProxyRE =

So this should be ok.

[patak-cat]

Nice one! 👏🏼