perf(worker): inline worker without base64 (#18752)

Author: sapphi-red

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

@@ -322,21 +322,18 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
           urlCode = 'self.location.href'
         } else if (inlineRE.test(id)) {
           const chunk = await bundleWorkerEntry(config, id)
-          const encodedJs = `const encodedJs = "${Buffer.from(
-            chunk.code,
-          ).toString('base64')}";`
+          const jsContent = `const jsContent = ${JSON.stringify(chunk.code)};`
 
           const code =
             // Using blob URL for SharedWorker results in multiple instances of a same worker
             workerConstructor === 'Worker'
-              ? `${encodedJs}
-          const decodeBase64 = (base64) => Uint8Array.from(atob(base64), c => c.charCodeAt(0));
+              ? `${jsContent}
           const blob = typeof self !== "undefined" && self.Blob && new Blob([${
             workerType === 'classic'
               ? ''
               : // `URL` is always available, in `Worker[type="module"]`
                 `'URL.revokeObjectURL(import.meta.url);',`
-          }decodeBase64(encodedJs)], { type: "text/javascript;charset=utf-8" });
+          }jsContent], { type: "text/javascript;charset=utf-8" });
           export default function WorkerWrapper(options) {
             let objURL;
             try {
@@ -349,7 +346,7 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
               return worker;
             } catch(e) {
               return new ${workerConstructor}(
-                "data:text/javascript;base64," + encodedJs,
+                'data:text/javascript;charset=utf-8,' + encodeURIComponent(jsContent),
                 ${workerTypeOption}
               );
             }${
@@ -362,10 +359,10 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
                 : ''
             }
           }`
-              : `${encodedJs}
+              : `${jsContent}
           export default function WorkerWrapper(options) {
             return new ${workerConstructor}(
-              "data:text/javascript;base64," + encodedJs,
+              'data:text/javascript;charset=utf-8,' + encodeURIComponent(jsContent),
               ${workerTypeOption}
             );
           }

playground/worker/__tests__/es/worker-es.spec.ts

@@ -116,7 +116,7 @@ describe.runIf(isBuild)('build', () => {
     )
     // inlined shared worker
     expect(content).toMatch(
-      `return new SharedWorker("data:text/javascript;base64,"+`,
+      `return new SharedWorker("data:text/javascript;charset=utf-8,"+`,
     )
   })
 

playground/worker/__tests__/sourcemap-hidden/worker-sourcemap-hidden.spec.ts

@@ -94,7 +94,7 @@ describe.runIf(isBuild)('build', () => {
     expect(content).toMatch(
       `new Worker("/iife-sourcemap-hidden/assets/my-worker`,
     )
-    expect(content).toMatch(`new Worker("data:text/javascript;base64`)
+    expect(content).toMatch(`new Worker("data:text/javascript;charset=utf-8,"+`)
     expect(content).toMatch(
       `new Worker("/iife-sourcemap-hidden/assets/possible-ts-output-worker`,
     )

playground/worker/__tests__/sourcemap-inline/worker-sourcemap-inline.spec.ts

@@ -75,7 +75,7 @@ describe.runIf(isBuild)('build', () => {
     expect(content).toMatch(
       `new Worker("/iife-sourcemap-inline/assets/my-worker`,
     )
-    expect(content).toMatch(`new Worker("data:text/javascript;base64`)
+    expect(content).toMatch(`new Worker("data:text/javascript;charset=utf-8,"+`)
     expect(content).toMatch(
       `new Worker("/iife-sourcemap-inline/assets/possible-ts-output-worker`,
     )

playground/worker/__tests__/sourcemap/worker-sourcemap.spec.ts

@@ -95,7 +95,7 @@ describe.runIf(isBuild)('build', () => {
 
     // chunk
     expect(content).toMatch(`new Worker("/iife-sourcemap/assets/my-worker`)
-    expect(content).toMatch(`new Worker("data:text/javascript;base64`)
+    expect(content).toMatch(`new Worker("data:text/javascript;charset=utf-8,"+`)
     expect(content).toMatch(
       `new Worker("/iife-sourcemap/assets/possible-ts-output-worker`,
     )
@@ -117,8 +117,9 @@ describe.runIf(isBuild)('build', () => {
 })
 
 function getSourceMapUrl(code: string): string {
-  const regex = /\/\/[#@]\ssource(?:Mapping)?URL=\s*(\S+)/
-  const results = regex.exec(code)
+  const regex = /\/\/[#@]\ssource(?:Mapping)?URL=\s*(\S+)/g
+  const matches = [...code.matchAll(regex)]
+  const results = matches.at(-1)
 
   if (results && results.length >= 2) {
     return results[1]