Buy now - KiviCare WordPress

Learn how to generate optimized production builds of your customizations.

Quick Start

Build your project for deployment:

JAVASCRIPT

npm run build

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

What Happens During the Build

1. Code Compilation

React JSX → Browser-compatible JavaScript
SCSS → Optimized CSS
Images → Optimized and copied
Fonts → Copied to dist/assets/fonts/

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

dist/
├── dashboard.js # Main JavaScript bundle (minified)
├── dashboard.css # Main stylesheet (minified)
├── manifest.json # Asset manifest for WordPress
└── assets/
├── fonts/
└── images/

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:

import { useState } from ‘react’;
export const MyComponent = () => {
const [count, setCount] = useState(0);
return
Count: {count}
;
};

Production Output:

const MyComponent=()=>{const[e,t]=useState(0); return createElement(“div”, null, “Count: “,e)};

Readable code becomes compact and optimized.

Step 3 – Bundle Assets

All JS modules → dashboard.js
All CSS files → dashboard.css
Static assets → dist/assets/

Running the Build

JAVASCRIPT

npm run build

Example Output:

vite v7.0.0 building for production…
✓ 156 modules transformed.
dist/dashboard.css 42.18 kB │ gzip: 8.92 kB
dist/dashboard.js 327.45 kB │ gzip: 98.27 kB
✓ built in 2.31s

Verifying the Build

Confirm Files Exist

JAVASCRIPT

ls -lh dist/

You should see:

dashboard.js
dashboard.css
manifest.json
assets/

Preview the Production Build

Test locally before deployment:

JAVASCRIPT

npm run preview

This starts a local server that simulates production.

JAVASCRIPT

http://localhost:4173

Build Configuration

Located in vite.config.js:

export default {
build: {
outDir: ‘dist’,
sourcemap: false,
assetsDir: ‘assets’,
minify: ‘esbuild’,
rollupOptions: {
output: {
entryFileNames: ‘[name].js’,
assetFileNames: ‘[name].[ext]’,
}
}
}
}

Enable Source Maps (Debug Only)

JAVASCRIPT

build: { sourcemap: true }

⚠ Do not enable source maps in public production releases.

Development vs Production

Feature	Development	Production
HMR	✅	❌
File Size	Large	Optimized
Performance	Lower	High
Debugging	Easy	Limited
Use Case	Development	Live Site

Deploying to WordPress

Asset Loading Logic

Scenario	WordPress Loads
Dev server running	Files from `localhost:8080`
Dev server stopped	Files from `dist/`

Deployment Steps

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

Optimization Tips

Analyze Bundle Size

JAVASCRIPT

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

Add to config:

JAVASCRIPT

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

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

Code Splitting Example

JAVASCRIPT

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

<Suspense fallback={}>

Reduce Dependency Size

JAVASCRIPT

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

JAVASCRIPT

npm run build

Preview

JAVASCRIPT

npm run preview

Check Output

JAVASCRIPT

ls -lh dist/