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

@@ -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}