♻️ 使用 JSZipp 替换 jszip 处理 ZIP 文件 (#1479)

* refactor: 使用 fflate 替换 jszip 处理 ZIP 文件

* change to JSZipp

* JSZipp@1.0.5

* JSZipp@1.0.6

* update

* JSZipp@1.0.8

---------

Co-authored-by: 王一之 <yz@ggnb.top>

Author: cyfung1031

package.json

@@ -52,6 +52,7 @@
     "react-router-dom": "^7.13.0",
     "string-similarity-js": "^2.1.4",
     "uuid": "^11.1.0",
+    "web-jszipp": "^1.0.8",
     "webdav": "^5.9.0",
     "yaml": "^2.8.3"
   },
@@ -86,7 +87,6 @@
     "husky": "^9.1.7",
     "iconv-lite": "^0.7.2",
     "jsdom": "^26.1.0",
-    "jszip": "^3.10.1",
     "mock-xmlhttprequest": "^8.4.1",
     "postcss": "^8.5.6",
     "postcss-loader": "^8.2.0",

packages/filesystem/zip/rw.ts

@@ -1,5 +1,4 @@
-import type { JSZipObject } from "jszip";
-import type { JSZipFileOptions, JSZipFile } from "@App/pkg/utils/jszip-x";
+import type { JSZipFileOptions, JSZipFile, JSZipObject } from "@App/pkg/utils/jszip-x";
 import type { FileCreateOptions, FileReader, FileWriter } from "../filesystem";
 
 export class ZipFileReader implements FileReader {
@@ -29,13 +28,13 @@ export class ZipFileWriter implements FileWriter {
     }
   }
 
-  async write(content: string): Promise<void> {
+  async write(content: string | Blob): Promise<void> {
     const opts = {} as JSZipFileOptions;
     if (this.modifiedDate) {
-      const date = new Date(this.modifiedDate);
-      const dateWithOffset = new Date(date.getTime() - date.getTimezoneOffset() * 60000);
-      opts.date = dateWithOffset;
+      opts.date = new Date(this.modifiedDate);
+      // jszipp does not require timezone adjustment to UTC Date
     }
-    this.zip.file(this.path, content, opts);
+    const fileData = typeof content === "string" ? content : new Uint8Array(await content.arrayBuffer());
+    this.zip.file(this.path, fileData, opts);
   }
 }

packages/filesystem/zip/zip.ts

@@ -47,8 +47,7 @@ export default class ZipFileSystem implements FileSystem {
     const files: FileInfo[] = [];
     for (const [filename, jsZipObject] of Object.entries(this.zip.files)) {
       const date = jsZipObject.date; // the last modification date
-      const dateWithOffset = new Date(date.getTime() + date.getTimezoneOffset() * 60000);
-      const lastModificationDate = dateWithOffset.getTime();
+      const lastModificationDate = date.getTime();
       files.push({
         name: filename,
         path: filename,

pnpm-lock.yaml

@@ -1,7 +1,6 @@
 /* global process */
 import { promises as fs } from "fs";
-import { createWriteStream } from "fs";
-import JSZip from "jszip";
+import { ZipWriter } from "web-jszipp";
 import ChromeExtension from "crx";
 import { execSync } from "child_process";
 import manifest from "../src/manifest.json" with { type: "json" };
@@ -16,12 +15,14 @@ const PACK_FIREFOX = false;
 
 // ============================================================================
 
-const createJSZip = () => {
-  const currDate = new Date();
-  const dateWithOffset = new Date(currDate.getTime() - currDate.getTimezoneOffset() * 60000);
-  // replace the default date with dateWithOffset
-  JSZip.defaults.date = dateWithOffset;
-  return new JSZip();
+const zipMtime = new Date();
+
+const addZipFile = async (zip, path, content) => {
+  await zip.add({
+    path,
+    data: content,
+    meta: { modifiedAt: zipMtime },
+  });
 };
 
 // 判断是否为beta版本
@@ -113,8 +114,8 @@ firefoxManifest.optional_permissions = firefoxManifest.optional_permissions?.fil
   (permission) => permission !== "background"
 );
 
-const chrome = createJSZip();
-const firefox = createJSZip();
+const chrome = new ZipWriter({ outputAs: "uint8array" });
+const firefox = new ZipWriter({ outputAs: "uint8array" });
 
 async function addDir(zip, localDir, toDir, filters) {
   const sub = async (localDir, toDir) => {
@@ -129,38 +130,26 @@ async function addDir(zip, localDir, toDir, filters) {
       if (stats.isDirectory()) {
         await sub(localPath, `${toPath}/`);
       } else {
-        zip.file(toPath, await fs.readFile(localPath));
+        await addZipFile(zip, toPath, await fs.readFile(localPath));
       }
     }
   };
   await sub(localDir, toDir);
 }
 
-chrome.file("manifest.json", JSON.stringify(chromeManifest));
-firefox.file("manifest.json", JSON.stringify(firefoxManifest));
+await addZipFile(chrome, "manifest.json", JSON.stringify(chromeManifest));
+await addZipFile(firefox, "manifest.json", JSON.stringify(firefoxManifest));
 
 await Promise.all([
   addDir(chrome, "./dist/ext", "", ["manifest.json"]),
   addDir(firefox, "./dist/ext", "", ["manifest.json"]),
 ]);
 
 // 导出zip包
-chrome
-  .generateNodeStream({
-    type: "nodebuffer",
-    streamFiles: true,
-    compression: "DEFLATE",
-  })
-  .pipe(createWriteStream(`./dist/${packageInfo.name}-v${packageInfo.version}-chrome.zip`));
+await fs.writeFile(`./dist/${packageInfo.name}-v${packageInfo.version}-chrome.zip`, await chrome.close());
 
 PACK_FIREFOX &&
-  firefox
-    .generateNodeStream({
-      type: "nodebuffer",
-      streamFiles: true,
-      compression: "DEFLATE",
-    })
-    .pipe(createWriteStream(`./dist/${packageInfo.name}-v${packageInfo.version}-firefox.zip`));
+  (await fs.writeFile(`./dist/${packageInfo.name}-v${packageInfo.version}-firefox.zip`, await firefox.close()));
 
 // 处理crx
 const crx = new ChromeExtension({