fix: Customer SPA loading and optimize production build size

Problem 1: Customer SPA not loading (stuck on 'Loading...')
Root Cause: Missing type='module' attribute on customer SPA script tag
Solution: Added script_loader_tag filter to inject type='module' for ES modules

Problem 2: Production zip too large (21-41MB)
Root Cause: Build script included unnecessary files (dist folder, fonts, .vite, test files, archives)
Solution:
- Exclude entire customer-spa and admin-spa directories from rsync
- Manually copy only app.js and app.css for both SPAs
- Exclude dist/, archive/, test-*.php, check-*.php files
- Simplified Frontend/Assets.php to always load app.js/app.css directly (no manifest needed)

Changes:
- includes/Frontend/Assets.php:
  * Added type='module' to customer SPA script (both manifest and fallback paths)
  * Removed manifest logic, always load app.js and app.css directly
- build-production.sh:
  * Exclude customer-spa and admin-spa directories completely
  * Manually copy only dist/app.js and dist/app.css
  * Exclude dist/, archive/, test files

Result:
 Customer SPA loads with type='module' support
 Production zip reduced from 21-41MB to 1.6MB
 Only essential files included (app.js + app.css for both SPAs)
 Clean production package without dev artifacts

Package contents:
- Customer SPA: 480K (app.js) + 52K (app.css) = 532K
- Admin SPA: 2.6M (app.js) + 76K (app.css) = 2.7M
- PHP Backend: ~500K
- Total: 1.6M (compressed)
This commit is contained in:
Dwindi Ramadhana
2025-12-30 17:48:09 +07:00
parent a5e5db827b
commit 0609c6e3d8
3 changed files with 44 additions and 74 deletions

View File

@@ -75,51 +75,29 @@ class Assets {
return;
}
// Load manifest to get hashed filenames (Vite puts it in .vite/manifest.json)
$manifest_file = $dist_path . '.vite/manifest.json';
if (file_exists($manifest_file)) {
$manifest = json_decode(file_get_contents($manifest_file), true);
// Enqueue main JS
if (isset($manifest['src/main.tsx'])) {
$main_js = $manifest['src/main.tsx']['file'];
wp_enqueue_script(
'woonoow-customer-spa',
$plugin_url . 'customer-spa/dist/' . $main_js,
[],
null,
true
);
// Production build - load app.js and app.css directly
wp_enqueue_script(
'woonoow-customer-spa',
$plugin_url . 'customer-spa/dist/app.js',
[],
null,
true
);
// Add type="module" for Vite build
add_filter('script_loader_tag', function($tag, $handle, $src) {
if ($handle === 'woonoow-customer-spa') {
$tag = str_replace('<script ', '<script type="module" ', $tag);
}
// Enqueue main CSS
if (isset($manifest['src/main.tsx']['css'])) {
foreach ($manifest['src/main.tsx']['css'] as $css_file) {
wp_enqueue_style(
'woonoow-customer-spa',
$plugin_url . 'customer-spa/dist/' . $css_file,
[],
null
);
}
}
} else {
// Fallback for production build without manifest
wp_enqueue_script(
'woonoow-customer-spa',
$plugin_url . 'customer-spa/dist/app.js',
[],
null,
true
);
wp_enqueue_style(
'woonoow-customer-spa',
$plugin_url . 'customer-spa/dist/app.css',
[],
null
);
}
return $tag;
}, 10, 3);
wp_enqueue_style(
'woonoow-customer-spa',
$plugin_url . 'customer-spa/dist/app.css',
[],
null
);
}
}