@playcraft/build 0.0.9 → 0.0.10

package/dist/vite/plugin-build-state.js

@@ -0,0 +1,147 @@
+import path from 'path';
+import { BuildStateManager } from '../state/index.js';
+/**
+ * Vite 插件：记录 Playable Build 状态
+ * 在 Vite 打包过程中记录资源的处理信息
+ */
+export function viteBuildStatePlugin(options) {
+    let stateManager;
+    const transformedModules = new Map();
+    return {
+        name: 'vite-plugin-build-state',
+        enforce: 'post', // 在其他插件之后执行，以便记录最终的处理结果
+        async configResolved(config) {
+            console.log('[BuildState] 初始化状态管理器...');
+            // 创建状态管理器
+            stateManager = new BuildStateManager(options.baseBuildDir, options.outputDir);
+            // 尝试加载 Base Build 的状态
+            const loaded = await stateManager.loadState();
+            if (loaded) {
+                console.log('[BuildState] 已加载 Base Build 状态');
+            }
+            else {
+                console.log('[BuildState] 未找到 Base Build 状态，将创建新状态');
+            }
+            // 开始 Playable 构建阶段
+            stateManager.startStage('playable', {
+                platform: options.platform,
+                mode: config.mode,
+            });
+        },
+        async transform(code, id) {
+            // 记录模块转换信息
+            if (!id.includes('node_modules') && !id.startsWith('\0')) {
+                const originalSize = code.length;
+                // 这里我们只记录原始大小，转换后的大小将在后续的 hook 中更新
+                transformedModules.set(id, {
+                    originalSize,
+                    transformedSize: originalSize, // 初始值
+                });
+            }
+            return null; // 不修改代码
+        },
+        async generateBundle(options, bundle) {
+            console.log('[BuildState] 记录打包产物...');
+            // 遍历所有生成的文件
+            for (const [fileName, output] of Object.entries(bundle)) {
+                if (output.type === 'asset') {
+                    // 资产文件（图片、字体等）
+                    const assetId = `playable-asset-${fileName}`;
+                    const assetSize = typeof output.source === 'string'
+                        ? Buffer.byteLength(output.source, 'utf-8')
+                        : output.source.length;
+                    // 尝试从 Base Build 状态中找到原始资产
+                    const existingAsset = stateManager.getAsset(assetId);
+                    const originalSize = existingAsset?.originalSize || assetSize;
+                    // 判断资产类型
+                    const ext = path.extname(fileName).toLowerCase();
+                    let assetType = 'other';
+                    if (['.png', '.jpg', '.jpeg', '.webp', '.gif'].includes(ext)) {
+                        assetType = 'texture';
+                    }
+                    else if (['.mp3', '.wav', '.ogg'].includes(ext)) {
+                        assetType = 'audio';
+                    }
+                    else if (['.glb', '.gltf', '.obj', '.fbx'].includes(ext)) {
+                        assetType = 'model';
+                    }
+                    else if (ext === '.css') {
+                        assetType = 'css';
+                    }
+                    else if (['.woff', '.woff2', '.ttf', '.otf'].includes(ext)) {
+                        assetType = 'font';
+                    }
+                    // 如果资产不存在，先记录
+                    if (!existingAsset) {
+                        stateManager.recordAsset(assetId, fileName, fileName, originalSize, assetType);
+                    }
+                    // 更新 Playable 阶段的处理信息
+                    const optimizations = [];
+                    // 检测图片压缩
+                    if (assetType === 'texture' && assetSize < originalSize * 0.9) {
+                        optimizations.push('image-compress');
+                    }
+                    // 检测格式转换（如 PNG -> WebP）
+                    if (fileName.includes('.webp') && existingAsset?.originalName.includes('.png')) {
+                        optimizations.push('format-convert');
+                    }
+                    stateManager.updateAsset(assetId, 'playable', fileName, fileName, assetSize, {
+                        optimizations,
+                        inlined: false,
+                    });
+                }
+                else if (output.type === 'chunk') {
+                    // JavaScript chunk
+                    const chunkId = `playable-chunk-${fileName}`;
+                    const chunkSize = Buffer.byteLength(output.code, 'utf-8');
+                    // 计算原始大小（所有模块的原始大小之和）
+                    let originalSize = 0;
+                    for (const moduleId of Object.keys(output.modules)) {
+                        const moduleInfo = transformedModules.get(moduleId);
+                        if (moduleInfo) {
+                            originalSize += moduleInfo.originalSize;
+                        }
+                    }
+                    if (originalSize === 0) {
+                        originalSize = chunkSize; // 回退值
+                    }
+                    // 记录 chunk
+                    stateManager.recordAsset(chunkId, fileName, fileName, originalSize, 'script');
+                    const optimizations = [];
+                    // 检测压缩
+                    if (output.code.length < originalSize * 0.8) {
+                        optimizations.push('minify');
+                    }
+                    // 检测 tree-shaking（通过模块数量判断）
+                    if (Object.keys(output.modules).length < Object.keys(output.modules).length * 0.9) {
+                        optimizations.push('tree-shake');
+                    }
+                    // 检测代码分割
+                    if (fileName.includes('chunk') || fileName.includes('-')) {
+                        optimizations.push('code-split');
+                    }
+                    stateManager.updateAsset(chunkId, 'playable', fileName, fileName, chunkSize, {
+                        optimizations,
+                        inlined: false,
+                    });
+                }
+            }
+        },
+        async closeBundle() {
+            // 结束 Playable 构建阶段
+            stateManager.endStage();
+            // 只在分析模式下保存状态文件（分析报告需要用到）
+            if (options.analyze) {
+                console.log('[BuildState] 保存构建状态...');
+                await stateManager.saveState();
+            }
+            // 输出统计信息
+            const stats = stateManager.getStatistics();
+            console.log(`[BuildState] 构建统计:`);
+            console.log(`  - 总资产数: ${stats.totalAssets}`);
+            console.log(`  - 原始大小: ${(stats.totalOriginalSize / 1024).toFixed(2)} KB`);
+            console.log(`  - 最终大小: ${(stats.totalFinalSize / 1024).toFixed(2)} KB`);
+            console.log(`  - 总压缩率: ${(stats.totalCompressionRatio * 100).toFixed(1)}%`);
+        },
+    };
+}

package/dist/vite/plugin-esm-html-generator.js

@@ -724,8 +724,17 @@ ${deferWrapper}`);
                     fileName: 'esm-bundle',
                     formats: ['iife'],
                 },
-                // 暂时禁用压缩来调试语法错误
-                minify: false,
+                // 使用 terser 压缩 JS
+                minify: options.minify ? 'terser' : false,
+                terserOptions: options.minify ? {
+                    compress: {
+                        drop_console: true,
+                        drop_debugger: true,
+                    },
+                    format: {
+                        comments: false, // 移除所有注释
+                    },
+                } : undefined,
                 rollupOptions: {
                     // 将 playcanvas 和引擎文件设为外部依赖
                     // 引擎已经在 HTML 中单独内联，不需要再次打包

package/dist/vite/plugin-platform.js

@@ -196,7 +196,9 @@ async function rewriteConfig(folderPath, assetPrefix) {
     }
 }
 async function applyMraidSupport(outDir) {
-    await patchConfigFillMode(outDir);
+    // Note: We no longer patch fillMode to 'NONE' because it causes canvas scaling issues
+    // The MRAID resize patch handles the sizing correctly with any fillMode
+    // await patchConfigFillMode(outDir);  // Removed: causes canvas scaling issues
     await patchStylesForMraid(outDir);
 }
 async function patchConfigFillMode(outDir) {

package/dist/vite/plugin-playcanvas.d.ts

@@ -9,6 +9,7 @@ export interface PlayCanvasPluginOptions {
     patchXhrOut: boolean;
     inlineGameScripts: boolean;
     compressEngine: boolean;
+    compressConfigJson: boolean;
     configJsonInline: boolean;
     mraidSupport: boolean;
     ammoReplacement?: 'p2' | 'cannon';

package/dist/vite/plugin-playcanvas.js

@@ -73,6 +73,9 @@ export function vitePlayCanvasPlugin(options) {
                     }
                     // 对于 Classic 模式或 ESM 原生模式，保持原有的多文件结构
                 }
+                // 注意：HTML 压缩不能在这里执行，因为 Vite 还需要解析 HTML
+                // HTML 模板已经在 templates/ 中被压缩为单行
+                // 最终的 HTML 压缩由 vite-plugin-singlefile 在最后阶段处理
                 return html;
             },
         },
@@ -107,7 +110,7 @@ async function inlineEngineScript(html, baseBuildDir, options) {
         const enginePath = path.join(baseBuildDir, engineName);
         try {
             await fs.access(enginePath);
-            const engineCode = await fs.readFile(enginePath, 'utf-8');
+            let engineCode = await fs.readFile(enginePath, 'utf-8');
             const patchScripts = await getEnginePatchScripts(options);
             const engineScript = options.compressEngine
                 ? `${await getLz4InlineScript()}${await buildCompressedEngineScript(engineCode)}`
@@ -202,6 +205,8 @@ async function generateAndInlineSettings(html, baseBuildDir, options, pluginCont
     const appProps = configJson.application_properties || {};
     const scripts = appProps.scripts || [];
     const preloadModules = extractPreloadModules(configJson);
+    // 保留原始的 powerPreference 设置，默认为 high-performance
+    const powerPreference = appProps.powerPreference || 'high-performance';
     const settingsCode = `
 window.ASSET_PREFIX = "";
 window.SCRIPT_PREFIX = "";
@@ -211,7 +216,7 @@ window.CONTEXT_OPTIONS = {
     'alpha': ${appProps.transparentCanvas === true},
     'preserveDrawingBuffer': ${appProps.preserveDrawingBuffer === true},
     'deviceTypes': ['webgl2', 'webgl1'],
-    'powerPreference': "default"
+    'powerPreference': "${powerPreference}"
 };
 window.SCRIPTS = [${scripts.join(', ')}];
 window.CONFIG_FILENAME = ${configValue};
@@ -260,8 +265,24 @@ async function inlineESMBundleAssets(html, baseBuildDir, options, pluginContext)
     if (options.mraidSupport) {
         configJson = applyMraidConfig(configJson);
     }
-    // 5. 生成 config data URL
-    const configDataUrl = `data:application/json;base64,${Buffer.from(JSON.stringify(configJson)).toString('base64')}`;
+    // 5. 生成 config.json 的 data URL
+    // 如果启用 compressConfigJson，使用 LZ4 压缩后再 base64 编码
+    const configJsonString = JSON.stringify(configJson);
+    let configDataUrl;
+    if (options.compressConfigJson) {
+        const lz4 = await loadLz4Module();
+        const compressed = lz4.compress(Buffer.from(configJsonString));
+        const compressedBase64 = Buffer.from(compressed).toString('base64');
+        // 使用 lz4-json 前缀标识压缩格式，运行时需要解压
+        configDataUrl = `data:application/x-lz4-json;base64,${compressedBase64}`;
+        const originalSize = Buffer.from(configJsonString).length;
+        const compressedSize = compressed.length;
+        const ratio = ((1 - compressedSize / originalSize) * 100).toFixed(1);
+        console.log(`[PlayCanvasPlugin] ESM Bundle: config.json 已压缩 (${formatBytes(originalSize)} → ${formatBytes(compressedSize)}, 减少 ${ratio}%)`);
+    }
+    else {
+        configDataUrl = `data:application/json;base64,${Buffer.from(configJsonString).toString('base64')}`;
+    }
     // 6. 处理场景文件 - 获取第一个场景的 data URL
     let sceneDataUrl = '';
     if (configJson.scenes && configJson.scenes.length > 0) {
@@ -318,20 +339,21 @@ async function inlineESMBundleAssets(html, baseBuildDir, options, pluginContext)
         }
     }
     // 8. 在 HTML 中查找并替换 ESM Bundle IIFE 代码中的配置值
-    // CONFIG_FILENAME = "config.json" → CONFIG_FILENAME = "data:application/json;base64,..."
-    // 注意：替换字符串中的 $ 是特殊字符，需要转义
-    const escapedConfigDataUrl = configDataUrl.replace(/\$/g, '$$$$');
-    // 替换 CONFIG_FILENAME（支持多种格式）
-    // 格式1: const CONFIG_FILENAME = "config.json"
-    // 格式2: CONFIG_FILENAME="config.json"
-    html = html.replace(/CONFIG_FILENAME\s*=\s*["']config\.json["']/g, `CONFIG_FILENAME = "${escapedConfigDataUrl}"`);
-    // ⚠️ 重要：Vite 压缩后，变量名会被混淆（如 CONFIG_FILENAME → vh）
-    // 需要直接替换 .configure("config.json" 调用中的字符串字面量
-    // 格式: .configure("config.json", ...) 或 .configure('config.json', ...)
+    // 方案1+3：直接将 CONFIG_FILENAME = "config.json" 替换为 data URL
+    // 8.1 替换 CONFIG_FILENAME
+    // 格式1: CONFIG_FILENAME = "config.json"
+    // 格式2: CONFIG_FILENAME="config.json"  (压缩后)
+    const configReplaceCount = (html.match(/CONFIG_FILENAME\s*=\s*["']config\.json["']/g) || []).length;
+    if (configReplaceCount > 0) {
+        html = html.replace(/CONFIG_FILENAME\s*=\s*["']config\.json["']/g, `CONFIG_FILENAME="${configDataUrl}"`);
+        console.log(`[PlayCanvasPlugin] ESM Bundle: 替换了 ${configReplaceCount} 处 CONFIG_FILENAME`);
+    }
+    // 8.2 替换 configure("config.json") 调用
+    // Vite 压缩后可能是: .configure("config.json",
     const configureReplaceCount = (html.match(/\.configure\s*\(\s*["']config\.json["']/g) || []).length;
     if (configureReplaceCount > 0) {
-        html = html.replace(/\.configure\s*\(\s*["']config\.json["']/g, `.configure("${escapedConfigDataUrl}"`);
-        console.log(`[PlayCanvasPlugin] ESM Bundle: 替换了 ${configureReplaceCount} 处 .configure("config.json") 调用`);
+        html = html.replace(/\.configure\s*\(\s*["']config\.json["']/g, `.configure("${configDataUrl}"`);
+        console.log(`[PlayCanvasPlugin] ESM Bundle: 替换了 ${configureReplaceCount} 处 .configure("config.json")`);
     }
     // 9. 替换 SCENE_PATH
     if (sceneDataUrl) {
@@ -780,6 +802,33 @@ async function inlineLoadingScript(html, baseBuildDir) {
     }
     return html;
 }
+/**
+ * 压缩 CSS 代码
+ * 移除注释、多余空白、合并为单行
+ */
+function minifyCSS(css) {
+    return css
+        // 移除多行注释 /* ... */
+        .replace(/\/\*[\s\S]*?\*\//g, '')
+        // 移除单行注释 // ... (CSS 不标准但有些预处理器会保留)
+        .replace(/\/\/.*$/gm, '')
+        // 将多个空白字符（空格、换行、制表符）替换为单个空格
+        .replace(/\s+/g, ' ')
+        // 移除 { 前的空格
+        .replace(/\s*\{\s*/g, '{')
+        // 移除 } 后的空格
+        .replace(/\s*\}\s*/g, '}')
+        // 移除 : 前后的空格
+        .replace(/\s*:\s*/g, ':')
+        // 移除 ; 前后的空格
+        .replace(/\s*;\s*/g, ';')
+        // 移除 , 后的空格
+        .replace(/,\s*/g, ',')
+        // 移除最后一个 ; 在 } 前
+        .replace(/;}/g, '}')
+        // 去除首尾空白
+        .trim();
+}
 /**
  * 内联 CSS 文件
  */
@@ -799,6 +848,8 @@ async function inlineCSS(html, baseBuildDir, options) {
             if (options.mraidSupport && !cssContent.includes('fill-mode-NONE')) {
                 cssContent += '\n#application-canvas.fill-mode-NONE { margin: 0; width: 100%; height: 100%; }\n';
             }
+            // 压缩 CSS（移除注释、多余空白、合并为单行）
+            cssContent = minifyCSS(cssContent);
             // 替换 link 标签为 style 标签
             html = html.replace(match[0], `<style>${cssContent}</style>`);
         }
@@ -1004,10 +1055,14 @@ async function inlineConfigAssetUrls(configJson, baseBuildDir, pluginContext) {
                 }
             }
             // ✅ 核心优化：如果是图片，使用 sharp 压缩
+            // ⚠️ 重要：字体纹理（type === 'font'）不能转换为 WebP！
+            // MSDF/位图字体的 PNG 纹理包含精确的距离场/像素数据，
+            // WebP 有损压缩会破坏这些数据导致字体渲染异常
             else if (isImageFile(cleanUrl)) {
+                const isFontTexture = asset.type === 'font';
                 const compressed = await compressImage(buffer, cleanUrl, {
-                    convertToWebP: true,
-                    quality: 75,
+                    convertToWebP: !isFontTexture, // 字体纹理不转换为 WebP
+                    quality: isFontTexture ? 100 : 75, // 字体纹理使用无损压缩
                 });
                 // 防御性检查：如果压缩后的 buffer 为空，使用原始 buffer
                 if (!compressed.buffer || compressed.buffer.length === 0) {
@@ -1196,10 +1251,15 @@ async function compressImage(buffer, filePath, options) {
             };
         }
         // 按原格式压缩
+        const quality = options?.quality ?? 80;
         switch (ext) {
             case '.png':
+                // 如果 quality >= 100，使用无损压缩（适用于字体纹理）
                 const pngBuffer = await image
-                    .png({ quality: 80, compressionLevel: 9 })
+                    .png({
+                    compressionLevel: quality >= 100 ? 6 : 9, // 无损时使用中等压缩
+                    palette: quality < 100, // 无损时不使用调色板
+                })
                     .toBuffer();
                 // 防御性检查
                 if (!pngBuffer || pngBuffer.length === 0) {
@@ -1295,7 +1355,9 @@ function buildConfigValue(configJson) {
 function applyMraidConfig(configJson) {
     const next = { ...configJson };
     const props = { ...(next.application_properties || {}) };
-    props.fillMode = 'NONE';
+    // Keep original fillMode (usually KEEP_ASPECT) for correct canvas scaling
+    // The MRAID resize patch will handle the sizing
+    // props.fillMode = 'NONE';  // Removed: causes canvas scaling issues
     next.application_properties = props;
     return next;
 }
@@ -1339,6 +1401,18 @@ async function getEnginePatchScripts(options) {
         const patchCode = await readPatchFile('one-page-mraid-resize-canvas.js');
         scripts.push(`<script>${patchCode}</script>`);
     }
+    // 如果启用了 config.json 压缩，需要注入 LZ4 解压运行时代码
+    // 注意：必须在 compressEngine 之前检查，因为 compressEngine 也会注入 lz4.js
+    if (options.compressConfigJson && !options.compressEngine) {
+        // 如果没有启用引擎压缩，需要单独注入 lz4.js
+        const lz4Script = await getLz4InlineScript();
+        scripts.push(lz4Script);
+    }
+    // 注入 config.json 解压 patch（拦截 fetch 请求并解压 LZ4 数据）
+    if (options.compressConfigJson) {
+        const configDecompressPatch = buildConfigJsonDecompressPatch();
+        scripts.push(`<script>${configDecompressPatch}</script>`);
+    }
     if (options.compressEngine) {
         // Focus patch: 确保 canvas 获得焦点以接收键盘事件
         const focusPatch = `!function(){var e=function(){var e=document.getElementById("application-canvas");if(!e)return!1;try{e.focus()}catch(t){}e.addEventListener("pointerdown",function(){e.focus()}),e.addEventListener("click",function(){e.focus()});return!0},t=0;if(!e()){var n=setInterval(function(){(e()||++t>50)&&clearInterval(n)},100)}}();`;
@@ -1379,3 +1453,69 @@ async function readPatchFile(name) {
     const patchPath = path.resolve(currentDir, '../../templates/patches', name);
     return await fs.readFile(patchPath, 'utf-8');
 }
+/**
+ * 格式化字节数为人类可读格式
+ */
+function formatBytes(bytes) {
+    if (bytes === 0)
+        return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${(bytes / Math.pow(k, i)).toFixed(2)} ${sizes[i]}`;
+}
+/**
+ * 构建 config.json 解压 patch
+ *
+ * 这个 patch 拦截 PlayCanvas 的 pc.Http.prototype.get 请求，
+ * 检测是否为 LZ4 压缩的 config.json，如果是则解压后返回。
+ *
+ * 工作原理：
+ * 1. 保存原始 pc.Http.prototype.get 函数
+ * 2. 重写 get，检测 URL 是否为 LZ4 压缩的 JSON data URL
+ * 3. 如果是，解压并通过 callback 返回解析后的 JSON 对象
+ *
+ * 注意：
+ * - PlayCanvas 使用 pc.Http.prototype.get 加载 config.json，不是 fetch
+ * - 使用 lz4.js 提供的 Buffer polyfill 进行解压
+ * - 必须在 pc 对象可用后才能生效，所以使用轮询等待
+ */
+function buildConfigJsonDecompressPatch() {
+    // 原始代码:
+    // (function() {
+    //   function patch() {
+    //     if (!window.pc || !window.pc.Http) return false;
+    //     var oldGet = pc.Http.prototype.get;
+    //     pc.Http.prototype.get = function(url, options, callback) {
+    //       if (typeof options === 'function') {
+    //         callback = options;
+    //         options = {};
+    //       }
+    //       if (typeof url === 'string' && url.startsWith('data:application/x-lz4-json;base64,')) {
+    //         try {
+    //           var base64 = url.replace('data:application/x-lz4-json;base64,', '');
+    //           var compressed = new Buffer(base64, 'base64');
+    //           var decompressed = lz4.decompress(compressed);
+    //           var str = Buffer.from(decompressed).toString('utf8');
+    //           var json = JSON.parse(str);
+    //           console.log('[LZ4 Config] Decompressed config.json successfully, size:', str.length);
+    //           callback(null, json);
+    //         } catch(e) {
+    //           console.error('[LZ4 Config] Decompression error:', e);
+    //           callback(e);
+    //         }
+    //         return;
+    //       }
+    //       oldGet.call(this, url, options, callback);
+    //     };
+    //     return true;
+    //   }
+    //   if (!patch()) {
+    //     var c = 0;
+    //     var i = setInterval(function() {
+    //       if (patch() || ++c > 100) clearInterval(i);
+    //     }, 10);
+    //   }
+    // })();
+    return `!function(){function p(){if(!window.pc||!pc.Http)return!1;var o=pc.Http.prototype.get;return pc.Http.prototype.get=function(e,t,n){"function"==typeof t&&(n=t,t={});if("string"==typeof e&&e.startsWith("data:application/x-lz4-json;base64,")){try{var r=e.replace("data:application/x-lz4-json;base64,",""),a=new Buffer(r,"base64"),d=lz4.decompress(a),s=Buffer.from(d).toString("utf8"),j=JSON.parse(s);console.log("[LZ4 Config] Decompressed config.json successfully, size:",s.length);n(null,j)}catch(x){console.error("[LZ4 Config] Decompression error:",x);n(x)}return}o.call(this,e,t,n)},!0}if(!p()){var c=0,i=setInterval(function(){(p()||++c>100)&&clearInterval(i)},10)}}();`;
+}

package/dist/vite/plugin-source-builder.js

@@ -94,6 +94,7 @@ export function viteSourceBuilderPlugin(options) {
             // 生成 config.json（支持场景过滤）
             const config = await generateConfig(projectConfig, {
                 selectedScenes: options.selectedScenes,
+                projectDir: options.projectDir,
             });
             // 为脚本资产补齐 __game-scripts.js 信息（仅在 Classic 模式下）
             if (options.buildMode !== 'esm') {

package/dist/vite/plugin-template-minifier.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Vite 插件：模板字符串压缩
+ *
+ * 在构建完成后（closeBundle 阶段）对输出的 HTML 文件进行后处理，
+ * 压缩 JS 代码中的多行模板字符串，减小包体积。
+ *
+ * 这个插件必须在 vite-plugin-singlefile 之后运行，
+ * 因为它直接处理最终输出的文件，而不是通过 Vite 的 HTML 处理管道。
+ */
+import type { Plugin } from 'vite';
+export interface TemplateMinifierOptions {
+    /** 输出目录 */
+    outputDir: string;
+    /** 是否启用（默认 true） */
+    enabled?: boolean;
+}
+/**
+ * 创建模板字符串压缩插件
+ */
+export declare function viteTemplateMinifierPlugin(options: TemplateMinifierOptions): Plugin;