Building for Production

Learn how to generate optimized production builds of your customizations.

Quick Start

Build your project for deployment:

npm run build

That’s it. Your optimized files will be available in the dist/ directory.

What Happens During the Build

1. Code Compilation

2. Optimization Steps

During the build, Vite automatically performs:

• Minification – Removes whitespace and shortens variable names
• Tree Shaking – Eliminates unused code
• Code Splitting – Separates vendor and app code
• Asset Optimization – Compresses images and static files
• CSS Purging – Removes unused styles

3. Output Structure

Build Process Explained

Step 1 – Clean Previous Build

Vite automatically clears the dist/ directory before generating new files.

Step 2 – Compile & Minify Code

Development Code:

Production Output:

Readable code becomes compact and optimized.

Step 3 – Bundle Assets

Running the Build

npm run build

Example Output:

Verifying the Build

Confirm Files Exist

ls -lh dist/

You should see:

• dashboard.js
• dashboard.css
• manifest.json
• assets/

Preview the Production Build

Test locally before deployment:

npm run preview

This starts a local server that simulates production.

http://localhost:4173

Build Configuration

Located in vite.config.js:

Enable Source Maps (Debug Only)

build: { sourcemap: true }

⚠ Do not enable source maps in public production releases.

Development vs Production

Deploying to WordPress

Asset Loading Logic

Deployment Steps

1. Build
   npm run build
2. Upload plugin (including dist/)
3. Clear caches (browser, WordPress, CDN)
4. Hard refresh the browser
5. Check console for errors

Optimization Tips

Analyze Bundle Size

npm install --save-dev rollup-plugin-visualizer

Add to config:

import { visualizer } from 'rollup-plugin-visualizer';

plugins: [visualizer({ open: true, gzipSize: true })]

Code Splitting Example

const HeavyComponent = lazy(() => import('./HeavyComponent'));

<Suspense fallback={}>
  

Reduce Dependency Size

npm dedupe

Avoid large unnecessary libraries.

Troubleshooting

Build Fails

• Fix syntax errors
• Run npm install
• Check missing imports

Site Broken After Build

• Clear all caches
• Check browser console
• Confirm files uploaded to dist/

Build Checklist

Before going live:

• Build succeeds
• Preview tested
• No console errors
• All features verified
• Caches cleared
• Mobile tested

Quick Commands

Build

npm run build

Preview

npm run preview

Check Output

ls -lh dist/