From 4ae25b09c0454826031b8c657a83581a2c9a9324 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Wed, 5 Aug 2026 09:11:58 -0600
Subject: [PATCH] =?UTF-8?q?perf:=20skulpt=20=E6=94=B9=E4=B8=BA=E6=8C=89?=
 =?UTF-8?q?=E9=9C=80=E5=8A=A0=E8=BD=BD=EF=BC=8Cclient-zip=20=E6=8D=A2?=
 =?UTF-8?q?=E6=88=90=20fflate?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

skulpt 此前被 SubmitCode.vue 静态引用，945K 的 chunk 落在做题页首屏，
学生打开任何一道题都要下 233KB gzip，只为提交时拿一个语法错误行号。
改成 import() 懒加载并在语言切到 Python3 时预取，加载失败放行提交、
交给后端判题兜底。构建产物确认该 chunk 只剩一处 import() 引用，
index.html 不再引用。

client-zip 的能力 fflate 已经覆盖（utils/functions.ts 本就在用 zlibSync），
新增 createZipBlob 统一两处测试用例打包，删掉该依赖。压缩方式由 store
变为 deflate，Python zipfile 透明解压，后端不受影响。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 package-lock.json                             | 30 ++++++++++----
 package.json                                  |  1 -
 .../problem/components/SQLTestcaseEditor.vue  |  8 ++--
 .../problem/components/TestcaseGenerator.vue  |  9 ++---
 src/oj/problem/components/SubmitCode.vue      | 17 +++++++-
 src/oj/problem/utils/pythonSyntaxCheck.ts     | 40 +++++++++++++++++--
 src/utils/functions.ts                        | 25 +++++++++++-
 7 files changed, 105 insertions(+), 25 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4f3198e..67526cc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,7 +26,6 @@
         "canvas-confetti": "^1.9.4",
         "chart.js": "^4.5.1",
         "chartjs-chart-wordcloud": "^4.4.5",
-        "client-zip": "^2.5.0",
         "codemirror": "^6.0.2",
         "copy-text-to-clipboard": "^3.2.2",
         "date-fns": "^4.4.0",
@@ -2116,6 +2115,29 @@
         "vue": "^3.0.11"
       }
     },
+    "node_modules/@emnapi/core": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.3.tgz",
+      "integrity": "sha512-zLpS5asjEb7lq8jYLq37N6XKaE41DIexlY1rF/z4/tIl3wo13Sqm28fRyfIsKZD+NZ8mM5RoKkpW/rBcuoSZSg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.3",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/core/node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.3.tgz",
+      "integrity": "sha512-ELEBe8PsLvvJ6QMr0zLt8ffvOHW/dc1m3CEzNMg7aJUv3bMaoDtw2TXyDAwkYBuroxxuHEwhRTLJSe5sya547g==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@emnapi/wasi-threads": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz",
@@ -4589,12 +4611,6 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
-    "node_modules/client-zip": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/client-zip/-/client-zip-2.5.0.tgz",
-      "integrity": "sha512-ydG4nDZesbFurnNq0VVCp/yyomIBh+X/1fZPI/P24zbnG4dtC4tQAfI5uQsomigsUMeiRO2wiTPizLWQh+IAyQ==",
-      "license": "MIT"
-    },
     "node_modules/codemirror": {
       "version": "6.0.2",
       "resolved": "https://registry.npmmirror.com/codemirror/-/codemirror-6.0.2.tgz",
diff --git a/package.json b/package.json
index 7390c58..0c829e0 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,6 @@
     "canvas-confetti": "^1.9.4",
     "chart.js": "^4.5.1",
     "chartjs-chart-wordcloud": "^4.4.5",
-    "client-zip": "^2.5.0",
     "codemirror": "^6.0.2",
     "copy-text-to-clipboard": "^3.2.2",
     "date-fns": "^4.4.0",
diff --git a/src/admin/problem/components/SQLTestcaseEditor.vue b/src/admin/problem/components/SQLTestcaseEditor.vue
index 11e4167..f1aa2ba 100644
--- a/src/admin/problem/components/SQLTestcaseEditor.vue
+++ b/src/admin/problem/components/SQLTestcaseEditor.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { downloadZip } from "client-zip"
 import type { LANGUAGE, SQLDisplay, Testcase } from "utils/types"
+import { createZipBlob } from "utils/functions"
 import SQLDataTable from "oj/problem/components/SQLDataTable.vue"
 import {
   generateSQLTestcase,
@@ -156,15 +156,13 @@ async function preview() {
 async function upload() {
   isUploading.value = true
   try {
-    const now = new Date()
     const data = scripts.value
       .filter((s) => s.sql.trim())
       .map((s, i) => ({
         name: `${i + 1}.sql`,
-        input: s.sql,
-        lastModified: now,
+        content: s.sql,
       }))
-    const blob = await downloadZip(data).blob()
+    const blob = createZipBlob(data)
     const file = new File([blob], "testcase.zip", { type: "application/zip" })
 
     const res = await uploadTestcases(file, { sql: true })
diff --git a/src/admin/problem/components/TestcaseGenerator.vue b/src/admin/problem/components/TestcaseGenerator.vue
index 8b79f2f..589ce29 100644
--- a/src/admin/problem/components/TestcaseGenerator.vue
+++ b/src/admin/problem/components/TestcaseGenerator.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { downloadZip } from "client-zip"
 import type { LANGUAGE, Testcase } from "utils/types"
+import { createZipBlob } from "utils/functions"
 import { createTestSubmission } from "utils/judge"
 import { uploadTestcases } from "../../api"
 
@@ -158,15 +158,14 @@ async function run() {
 async function upload() {
   isUploading.value = true
   try {
-    const now = new Date()
     const data = files.value
       .filter((f) => f.in.trim() && f.out && !f.error)
       .flatMap((f, i) => [
-        { name: `${i + 1}.in`, input: f.in, lastModified: now },
-        { name: `${i + 1}.out`, input: f.out, lastModified: now },
+        { name: `${i + 1}.in`, content: f.in },
+        { name: `${i + 1}.out`, content: f.out },
       ])
 
-    const blob = await downloadZip(data).blob()
+    const blob = createZipBlob(data)
     const file = new File([blob], "testcase.zip", { type: "application/zip" })
 
     const res = await uploadTestcases(file)
diff --git a/src/oj/problem/components/SubmitCode.vue b/src/oj/problem/components/SubmitCode.vue
index d690c88..9c574be 100644
--- a/src/oj/problem/components/SubmitCode.vue
+++ b/src/oj/problem/components/SubmitCode.vue
@@ -17,7 +17,10 @@ import SubmissionResult from "./SubmissionResult.vue"
 import { getSubmitButtonState } from "./submitButtonState"
 import { useBreakpoints } from "shared/composables/breakpoints"
 import { useUserStore } from "shared/store/user"
-import { checkPythonSyntax } from "oj/problem/utils/pythonSyntaxCheck"
+import {
+  checkPythonSyntax,
+  prefetchPythonSyntaxChecker,
+} from "oj/problem/utils/pythonSyntaxCheck"
 
 // ==================== 异步组件 ====================
 const ProblemComment = defineAsyncComponent(
@@ -50,6 +53,16 @@ const showResult = ref(false)
 const isFormatting = ref(false)
 const isSubmittingRequest = ref(false)
 
+// ==================== Python 语法检测器预取 ====================
+// 选中 Python3 时就把 Skulpt 拉下来，避免点提交时才开始下载
+watch(
+  () => codeStore.code.language,
+  (language) => {
+    if (language === "Python3") prefetchPythonSyntaxChecker()
+  },
+  { immediate: true },
+)
+
 // ==================== 提交冷却 ====================
 const { start: startCooldown, isPending: isCooldown } = useTimeout(5000, {
   controls: true,
@@ -99,7 +112,7 @@ async function submit() {
 
   // 0. Python3 语法检测
   if (codeStore.code.language === "Python3") {
-    const syntaxError = checkPythonSyntax(codeStore.code.value)
+    const syntaxError = await checkPythonSyntax(codeStore.code.value)
     if (syntaxError) {
       message.warning(`第 ${syntaxError.line} 行存在语法错误，请修正后再提交`)
       return
diff --git a/src/oj/problem/utils/pythonSyntaxCheck.ts b/src/oj/problem/utils/pythonSyntaxCheck.ts
index b838d7e..3b5bf9d 100644
--- a/src/oj/problem/utils/pythonSyntaxCheck.ts
+++ b/src/oj/problem/utils/pythonSyntaxCheck.ts
@@ -1,15 +1,47 @@
-// @ts-ignore - skulpt has no type definitions
-import Sk from "skulpt"
-
 export interface PythonSyntaxError {
   line: number
 }
 
+let skulptPromise: Promise<any> | null = null
+
+/**
+ * 按需加载 Skulpt（约 233KB gzip），只在提交 Python3 代码时才下载。
+ * 结果缓存，同一页面只加载一次。
+ */
+function loadSkulpt(): Promise<any> {
+  if (!skulptPromise) {
+    // @ts-ignore - skulpt has no type definitions
+    skulptPromise = import("skulpt").then((m) => m.default ?? m)
+  }
+  return skulptPromise
+}
+
+/**
+ * 提前把 Skulpt 拉下来，避免点提交时才开始下载。
+ * 失败不影响功能，提交时会再试一次。
+ */
+export function prefetchPythonSyntaxChecker() {
+  loadSkulpt().catch(() => {
+    skulptPromise = null
+  })
+}
+
 /**
  * 用 Skulpt 检测 Python 代码中的语法错误。
  * 只编译不执行，不受 input() 等 IO 调用影响。
+ * 加载失败时返回 null（放行提交），交给后端判题兜底。
  */
-export function checkPythonSyntax(code: string): PythonSyntaxError | null {
+export async function checkPythonSyntax(
+  code: string,
+): Promise<PythonSyntaxError | null> {
+  let Sk: any
+  try {
+    Sk = await loadSkulpt()
+  } catch {
+    skulptPromise = null
+    return null
+  }
+
   Sk.configure({ output: () => {} })
   try {
     Sk.compile(code, "prog.py", "exec")
diff --git a/src/utils/functions.ts b/src/utils/functions.ts
index ec22b3b..3ec9c7d 100644
--- a/src/utils/functions.ts
+++ b/src/utils/functions.ts
@@ -1,7 +1,14 @@
 import { getTime, intervalToDuration, parseISO, type Duration } from "date-fns"
 import { User } from "./types"
 import { USER_TYPE } from "./constants"
-import { strFromU8, strToU8, unzlibSync, zlibSync } from "fflate"
+import {
+  strFromU8,
+  strToU8,
+  unzlibSync,
+  zipSync,
+  zlibSync,
+  type Zippable,
+} from "fflate"
 import copyTextFallback from "copy-text-to-clipboard"
 import { customAlphabet } from "nanoid"
 
@@ -208,6 +215,22 @@ export function atou(base64: string): string {
   return strFromU8(unzipped)
 }
 
+/**
+ * 把若干文本文件打包成 zip Blob
+ * @param files 文件名和文本内容
+ * @param mtime 归档内的修改时间，默认当前时间
+ */
+export function createZipBlob(
+  files: { name: string; content: string }[],
+  mtime: Date = new Date(),
+): Blob {
+  const entries: Zippable = {}
+  for (const f of files) {
+    entries[f.name] = strToU8(f.content)
+  }
+  return new Blob([zipSync(entries, { mtime })], { type: "application/zip" })
+}
+
 /**
  * 复制文本到剪贴板
  * 优先使用 Clipboard API（支持在 modal 中使用），失败时回退到 copy-text-to-clipboard