Merge pull request #2876 from zsviczian/reduce-size

Refactoring: main.js size reduction

Author: zsviczian

RefactorPlan.md

@@ -38,14 +38,12 @@
     "lz-string": "^1.5.0",
     "monkey-around": "^2.3.0",
     "nanoid": "^5.1.16",
-    "opentype.js": "^1.3.4",
     "pako": "^2.1.0",
     "points-on-path": "^0.2.1",
     "polybooljs": "^1.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "roughjs": "^4.5.2",
-    "yaml": "^2.9.0"
+    "roughjs": "^4.5.2"
   },
   "devDependencies": {
     "@babel/core": "^7.22.9",
@@ -69,7 +67,6 @@
     "@types/chroma-js": "^3.1.1",
     "@types/js-beautify": "^1.14.0",
     "@types/node": "^22.19.19",
-    "@types/opentype.js": "^1.3.8",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
     "@zsviczian/excalidraw-extras-api": "^0.0.13",
@@ -81,7 +78,6 @@
     "eslint-plugin-obsidianmd": "^0.4.0",
     "eslint-plugin-prettier": "^5.0.0",
     "jiti": "^2.6.1",
-    "jsesc": "^3.0.2",
     "obsidian": "1.8.7",
     "postcss": "^8.5.25",
     "prettier": "^3.0.1",
@@ -111,4 +107,4 @@
     "node": ">=22.0.0",
     "npm": ">=10.0.0"
   }
-}
+}

package-lock.json

@@ -10,7 +10,6 @@ import fs from 'fs';
 import path from 'path';
 import postprocess from '@zsviczian/rollup-plugin-postprocess';
 import cssnano from 'cssnano';
-import jsesc from 'jsesc';
 import { minify } from 'uglify-js';
 import json from '@rollup/plugin-json';
 import { parseEnv } from 'node:util';
@@ -103,8 +102,13 @@ const react_pkg = isLib ? "" : minifyCode(isProd
 const reactdom_pkg = isLib ? "" : minifyCode(isProd
   ? fs.readFileSync("./node_modules/react-dom/umd/react-dom.production.min.js", "utf8")
   : fs.readFileSync("./node_modules/react-dom/umd/react-dom.development.js", "utf8"));
+const reactPackagesCompressed = isLib
+  ? ""
+  : compressDeflateBase64(react_pkg + reactdom_pkg + jsxRuntimeShim);
 
-const pako_pkg = isLib ? "" : fs.readFileSync("./node_modules/pako/dist/pako.min.js", "utf8");
+// Runtime payloads are only decompressed; including Pako's deflate implementation
+// would add unused code to the size-constrained Obsidian plugin bundle.
+const pako_pkg = isLib ? "" : fs.readFileSync("./node_modules/pako/dist/pako_inflate.min.js", "utf8");
 
 if (!isLib) {
   const excalidraw_styles = isProd
@@ -140,10 +144,7 @@ const packageString = isLib
   '  ' + pako_pkg + '\n' +
   '  return module.exports;\n' +
   '})();\n' +
-  '\nlet REACT_PACKAGES = `' +
-  jsesc(react_pkg + reactdom_pkg + jsxRuntimeShim, { quotes: 'backtick' }) +
-  '`;\n' +
-  // NEW: Fast, mobile-compatible runtime decompression 
+  // Define the dependency-free inflater before React participates in bootstrap.
   'const unpackBase64Deflate = (b64) => {\n' +
   '  const binStr = atob(b64);\n' +
   '  const len = binStr.length;\n' +
@@ -152,6 +153,7 @@ const packageString = isLib
   '  return new TextDecoder().decode(pako.inflate(bytes));\n' +
   '};\n' +
   'window.unpackBase64Deflate = unpackBase64Deflate;\n' +
+  'let REACT_PACKAGES = unpackBase64Deflate("' + reactPackagesCompressed + '");\n' +
   'const unpackExcalidraw = () => unpackBase64Deflate("' + compressDeflateBase64(excalidraw_pkg) + '");\n' +
   'let {react, reactDOM } = new Function(`${REACT_PACKAGES}; return {react: React, reactDOM: ReactDOM};`)();\n' +
   'let excalidrawLib = {};\n' +
@@ -292,4 +294,4 @@ if (process.env.NODE_ENV === "lib") {
   config.push(BUILD_CONFIG);
 }
 
-export default config;
+export default config;

package.json

@@ -7,7 +7,8 @@ import {
 } from "src/constants/constants";
 import { t } from "src/lang/helpers";
 import { getCJKDataURLs } from "src/utils/CJKLoader";
-import { getFontDataURL, getFontMetrics } from "src/utils/utils";
+import { getFontDataURL } from "src/utils/utils";
+import { getFontMetrics } from "src/utils/fontMetrics";
 import type ExcalidrawPlugin from "src/core/main";
 
 declare const mainDocument: Document;
@@ -115,17 +116,16 @@ export class FontManager {
       this.plugin.settings.experimantalFourthFont,
       "",
     );
-    let fontMetrics = file.extension.startsWith("woff")
+    let fontMetrics = file.extension.startsWith("woff") || !font.arrayBuffer
       ? undefined
-      : await getFontMetrics(fourthFontDataURL, "Local Font");
+      : getFontMetrics(font.arrayBuffer);
 
     if (!fontMetrics) {
       fontMetrics = {
         unitsPerEm: 1000,
         ascender: 750,
         descender: -250,
         lineHeight: 1.2,
-        fontName: "Local Font",
       };
     }
     this.getPackageMap().forEach(({ excalidrawLib }) => {

rollup.config.mjs

@@ -13,8 +13,9 @@ export { getEmbeddedFilenameParts } from "./embeddedFilenameParts";
  * @param fontFileName - Vault link path or font filename to resolve.
  * @param sourcePath - Vault path from which the font link is resolved.
  * @param name - Optional font-family name overriding the file basename.
- * @returns The font definition, resolved family name, and encoded data URL.
- * Empty strings are returned when the font cannot be resolved.
+ * @returns The font definition, resolved family name, encoded data URL, and
+ * original buffer. Empty strings and a null buffer are returned when the font
+ * cannot be resolved.
  * @remarks
  * MIME types and CSS format names intentionally preserve the established
  * extension mapping used by plugin startup and embedded SVG font loading.
@@ -24,13 +25,19 @@ export async function getFontDataURL(
   fontFileName: string,
   sourcePath: string,
   name?: string,
-): Promise<{ fontDef: string; fontName: string; dataURL: string }> {
+): Promise<{
+  fontDef: string;
+  fontName: string;
+  dataURL: string;
+  arrayBuffer: ArrayBuffer | null;
+}> {
   let fontDef = "";
   let fontName = "";
   let dataURL = "";
+  let arrayBuffer: ArrayBuffer | null = null;
   const f = app.metadataCache.getFirstLinkpathDest(fontFileName, sourcePath);
   if (f) {
-    const ab = await app.vault.readBinary(f);
+    arrayBuffer = await app.vault.readBinary(f);
     let mimeType = "";
     let format = "";
 
@@ -55,12 +62,12 @@ export async function getFontDataURL(
         mimeType = "application/octet-stream";
     }
     fontName = name ?? f.basename;
-    dataURL = await getDataURL(ab, mimeType);
+    dataURL = await getDataURL(arrayBuffer, mimeType);
     const split = dataURL.split(";base64,", 2);
     dataURL = `${split[0]};charset=utf-8;base64,${split[1]}`;
     fontDef = ` @font-face {font-family: "${fontName}";src: url("${dataURL}") format("${format}")}`;
   }
-  return { fontDef, fontName, dataURL };
+  return { fontDef, fontName, dataURL, arrayBuffer };
 }
 
 /**