From 0245eccf722ae062b80fd0b1b804cabf919c1847 Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Mon, 21 Apr 2025 16:52:49 +0800
Subject: [PATCH 1/2] feat: remove code to base64 for performance issue

---
 packages/canvas/init-canvas/init-canvas.ts           | 12 ++++++++++--
 .../canvas/scripts/vite-plugin-separate-build.ts     |  8 +++-----
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/canvas/init-canvas/init-canvas.ts b/packages/canvas/init-canvas/init-canvas.ts
index cdac3432dd..8099ffea9d 100644
--- a/packages/canvas/init-canvas/init-canvas.ts
+++ b/packages/canvas/init-canvas/init-canvas.ts
@@ -2,13 +2,21 @@ import canvasScript from './canvas?url&build=canvas'
 import canvasHtml from './canvas.html?raw'
 
 export function initCanvas(importMap = {}, importStyleUrls = []) {
-  return {
+  const res = {
     html: canvasHtml
       .replace('<!--%IMPORT_MAP%-->', `<script type="importmap">${JSON.stringify(importMap, null, 2)}</script>`)
       .replace(
         '<!--%IMPORT_STYLE%-->',
         importStyleUrls.map((styleUrl) => `<link rel="stylesheet" crossorigin="" href="${styleUrl}">`).join('\n')
       )
-      .replace('<!--%MAIN_SCRIPT%-->', `<script type="module" src="${canvasScript}"></script>`)
+      .replace(
+        '<!--%MAIN_SCRIPT%-->',
+        import.meta.env.MODE === 'development'
+          ? `<script type="module" src="${canvasScript}"></script>`
+          : // 将 $ 替换为 $$，然后在上一层的 $$ 再转义回来 $，避免被转义
+            `<script type="module">${canvasScript.replace(/\$/g, '$$$$')}</script>`
+      )
   }
+
+  return res
 }
diff --git a/packages/canvas/scripts/vite-plugin-separate-build.ts b/packages/canvas/scripts/vite-plugin-separate-build.ts
index ecb7a37d92..a7051e6e4a 100644
--- a/packages/canvas/scripts/vite-plugin-separate-build.ts
+++ b/packages/canvas/scripts/vite-plugin-separate-build.ts
@@ -5,7 +5,7 @@ const queryRE = /[?#].*$/
 
 const bundleCache = new WeakMap()
 
-function cleanUrl(url) {
+function cleanUrl(url: string) {
   return url.replace(queryRE, '')
 }
 function saveEmitBundleAssets(config, asset) {
@@ -88,10 +88,8 @@ export async function vitePluginBuildEntry(customBuildConfig) {
         buildConfig: match.groups.name,
         entries: [file]
       })
-      const formatBase64 = (code) => {
-        return 'data:text/javascript;base64,' + Buffer.from(code).toString('base64')
-      }
-      return `export default ${JSON.stringify(formatBase64(code))}\n`
+
+      return `export default ${JSON.stringify(code)}`
     },
     generateBundle(opts, bundle) {
       if (opts.__vite_skip_assets_emit__) {

From ff05a896958ba1595d705b5c9a6c34c76cb1b80e Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Tue, 22 Apr 2025 10:11:48 +0800
Subject: [PATCH 2/2] fix: use function replacer to avoid special replace
 pattern

---
 packages/canvas/init-canvas/init-canvas.ts | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/canvas/init-canvas/init-canvas.ts b/packages/canvas/init-canvas/init-canvas.ts
index 8099ffea9d..5c92a4dd5f 100644
--- a/packages/canvas/init-canvas/init-canvas.ts
+++ b/packages/canvas/init-canvas/init-canvas.ts
@@ -2,21 +2,19 @@ import canvasScript from './canvas?url&build=canvas'
 import canvasHtml from './canvas.html?raw'
 
 export function initCanvas(importMap = {}, importStyleUrls = []) {
-  const res = {
+  return {
     html: canvasHtml
       .replace('<!--%IMPORT_MAP%-->', `<script type="importmap">${JSON.stringify(importMap, null, 2)}</script>`)
       .replace(
         '<!--%IMPORT_STYLE%-->',
         importStyleUrls.map((styleUrl) => `<link rel="stylesheet" crossorigin="" href="${styleUrl}">`).join('\n')
       )
-      .replace(
-        '<!--%MAIN_SCRIPT%-->',
-        import.meta.env.MODE === 'development'
-          ? `<script type="module" src="${canvasScript}"></script>`
-          : // 将 $ 替换为 $$，然后在上一层的 $$ 再转义回来 $，避免被转义
-            `<script type="module">${canvasScript.replace(/\$/g, '$$$$')}</script>`
-      )
-  }
+      .replace('<!--%MAIN_SCRIPT%-->', () => {
+        if (import.meta.env.MODE === 'development') {
+          return `<script type="module" src="${canvasScript}"></script>`
+        }
 
-  return res
+        return `<script type="module">${canvasScript}</script>`
+      })
+  }
 }