dwindown/WooNooW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Customer SPA loading and optimize production build size

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

52
build-production.sh
View File

@@ -33,41 +33,17 @@ rsync -av --progress \
--exclude='.git' \
--exclude='.gitignore' \
--exclude='build' \
--exclude='dist' \
--exclude='*.log' \
--exclude='.DS_Store' \
--exclude='customer-spa/src' \
--exclude='customer-spa/public' \
--exclude='customer-spa/node_modules' \
--exclude='customer-spa/.vite' \
--exclude='customer-spa/package.json' \
--exclude='customer-spa/package-lock.json' \
--exclude='customer-spa/vite.config.ts' \
--exclude='customer-spa/tsconfig.json' \
--exclude='customer-spa/tsconfig.node.json' \
--exclude='customer-spa/index.html' \
--exclude='customer-spa/tailwind.config.js' \
--exclude='customer-spa/postcss.config.js' \
--exclude='customer-spa/.eslintrc.cjs' \
--exclude='admin-spa/src' \
--exclude='admin-spa/public' \
--exclude='admin-spa/node_modules' \
--exclude='admin-spa/.vite' \
--exclude='admin-spa/.cert' \
--exclude='admin-spa/package.json' \
--exclude='admin-spa/package-lock.json' \
--exclude='admin-spa/vite.config.ts' \
--exclude='admin-spa/tsconfig.json' \
--exclude='admin-spa/tsconfig.node.json' \
--exclude='admin-spa/index.html' \
--exclude='admin-spa/tailwind.config.js' \
--exclude='admin-spa/tailwind.config.cjs' \
--exclude='admin-spa/postcss.config.js' \
--exclude='admin-spa/postcss.config.cjs' \
--exclude='admin-spa/components.json' \
--exclude='admin-spa/.eslintrc.cjs' \
--exclude='customer-spa' \
--exclude='admin-spa' \
--exclude='examples' \
--exclude='*.sh' \
--exclude='*.md' \
--exclude='archive' \
--exclude='test-*.php' \
--exclude='check-*.php' \
./ ${BUILD_DIR}/${PLUGIN_NAME}/
# Verify production builds exist in source before copying
@@ -87,6 +63,22 @@ fi
echo "✓ Customer SPA build verified ($(du -h customer-spa/dist/app.js | cut -f1))"
echo "✓ Admin SPA build verified ($(du -h admin-spa/dist/app.js | cut -f1))"
# Copy only essential SPA build files
echo "Copying SPA build files..."
mkdir -p ${BUILD_DIR}/${PLUGIN_NAME}/customer-spa/dist
mkdir -p ${BUILD_DIR}/${PLUGIN_NAME}/admin-spa/dist
# Customer SPA - only app.js and app.css
cp customer-spa/dist/app.js ${BUILD_DIR}/${PLUGIN_NAME}/customer-spa/dist/
cp customer-spa/dist/app.css ${BUILD_DIR}/${PLUGIN_NAME}/customer-spa/dist/
# Admin SPA - only app.js and app.css (no dynamic imports for now)
cp admin-spa/dist/app.js ${BUILD_DIR}/${PLUGIN_NAME}/admin-spa/dist/
cp admin-spa/dist/app.css ${BUILD_DIR}/${PLUGIN_NAME}/admin-spa/dist/
echo "✓ Copied customer-spa: app.js ($(du -h customer-spa/dist/app.js | cut -f1)), app.css ($(du -h customer-spa/dist/app.css | cut -f1))"
echo "✓ Copied admin-spa: app.js ($(du -h admin-spa/dist/app.js | cut -f1)), app.css ($(du -h admin-spa/dist/app.css | cut -f1))"
# Create zip file
echo "Creating zip file..."
cd ${BUILD_DIR}

0
includes/Api/ProductsController_taxonomy_methods.php Normal file
View File

62
includes/Frontend/Assets.php
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);
// Production build - load app.js and app.css directly
wp_enqueue_script(
'woonoow-customer-spa',
$plugin_url . 'customer-spa/dist/app.js',
[],
null,
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
);
// 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);
}
return $tag;
}, 10, 3);
// 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
);
}
wp_enqueue_style(
'woonoow-customer-spa',
$plugin_url . 'customer-spa/dist/app.css',
[],
null
);
}
}