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:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user