{"id":2933,"date":"2026-02-05T05:26:23","date_gmt":"2026-02-05T05:26:23","guid":{"rendered":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/?p=2933"},"modified":"2026-02-05T05:52:32","modified_gmt":"2026-02-05T05:52:32","slug":"building-for-production","status":"publish","type":"post","link":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/kivicare-lite\/documentation\/developer-tool\/development-workflow\/building-for-production\/","title":{"rendered":"Building for Production"},"content":{"rendered":"<div class=\"nolwrap\">\n<p>Learn how to generate <strong>optimized production builds<\/strong> of your customizations.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Quick Start<\/strong><\/h2>\n\n\n\n<p>Build your project for deployment:<\/p>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">npm run build\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<p>That\u2019s it. Your optimized files will be available in the <code>dist\/<\/code> directory.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">What Happens During the Build<\/h2>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>1. Code Compilation<\/strong><\/h5>\n\n\n    <div class=\"docsy-alert-block alert-info\">\n                    <div class=\"alert-icon\">\n                <i class=\"ph-fill ph-info\"><\/i>\n            <\/div>\n                <div class=\"alert-content\">\n            React JSX \u2192 Browser-compatible JavaScript<br>SCSS \u2192 Optimized CSS<br>Images \u2192 Optimized and copied<br>Fonts \u2192 Copied to dist\/assets\/fonts\/        <\/div>\n    <\/div>\n    \n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>2. Optimization Steps<\/strong><\/h5>\n\n\n\n<p>During the build, Vite automatically performs:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Minification<\/strong> \u2013 Removes whitespace and shortens variable names<\/li>\n\n\n\n<li><strong>Tree Shaking<\/strong> \u2013 Eliminates unused code<\/li>\n\n\n\n<li><strong>Code Splitting<\/strong> \u2013 Separates vendor and app code<\/li>\n\n\n\n<li><strong>Asset Optimization<\/strong> \u2013 Compresses images and static files<\/li>\n\n\n\n<li><strong>CSS Purging<\/strong> \u2013 Removes unused styles<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>3. Output Structure<\/strong><\/h5>\n\n\n    <div class=\"docsy-alert-block alert-success\">\n                    <div class=\"alert-icon\">\n                <i class=\"ph-fill ph-check-circle\"><\/i>\n            <\/div>\n                <div class=\"alert-content\">\n            dist\/<br>\u251c\u2500\u2500 dashboard.js # Main JavaScript bundle (minified)<br>\u251c\u2500\u2500 dashboard.css # Main stylesheet (minified)<br>\u251c\u2500\u2500 manifest.json # Asset manifest for WordPress<br>\u2514\u2500\u2500 assets\/<br>\u251c\u2500\u2500 fonts\/<br>\u2514\u2500\u2500 images\/        <\/div>\n    <\/div>\n    \n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Build Process Explained<\/strong><\/h2>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Step 1 &#8211; Clean Previous Build<\/strong><\/h5>\n\n\n\n<p>Vite automatically clears the <code>dist\/<\/code> directory before generating new files.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Step 2 &#8211; Compile &amp; Minify Code<\/strong><\/h5>\n\n\n\n<p><strong>Development Code:<\/strong><\/p>\n\n\n    <div class=\"docsy-alert-block alert-info\">\n                    <div class=\"alert-icon\">\n                <i class=\"ph-fill ph-info\"><\/i>\n            <\/div>\n                <div class=\"alert-content\">\n            import { useState } from &#8216;react&#8217;;<br>export const MyComponent = () =&gt; {<br>const [count, setCount] = useState(0);<br>return<br>Count: {count}<br>;<br>};        <\/div>\n    <\/div>\n    \n\n\n<p><strong>Production Output:<\/strong><\/p>\n\n\n    <div class=\"docsy-alert-block alert-success\">\n                    <div class=\"alert-icon\">\n                <i class=\"ph-fill ph-check-circle\"><\/i>\n            <\/div>\n                <div class=\"alert-content\">\n            const MyComponent=()=&gt;{const[e,t]=useState(0); return createElement(&#8220;div&#8221;, null, &#8220;Count: &#8220;,e)};        <\/div>\n    <\/div>\n    \n\n\n<p>Readable code becomes compact and optimized.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Step 3 &#8211; Bundle Assets<\/strong><\/h5>\n\n\n    <div class=\"docsy-alert-block alert-info\">\n                    <div class=\"alert-icon\">\n                <i class=\"ph-fill ph-info\"><\/i>\n            <\/div>\n                <div class=\"alert-content\">\n            All JS modules \u2192 dashboard.js<br>All CSS files \u2192 dashboard.css<br>Static assets \u2192 dist\/assets\/        <\/div>\n    <\/div>\n    \n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Running the Build<\/strong><\/h2>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">npm run build\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<p><strong>Example Output:<\/strong><\/p>\n\n\n    <div class=\"docsy-alert-block alert-success\">\n                    <div class=\"alert-icon\">\n                <i class=\"ph-fill ph-check-circle\"><\/i>\n            <\/div>\n                <div class=\"alert-content\">\n            vite v7.0.0 building for production\u2026<br>\u2713 156 modules transformed.<br>dist\/dashboard.css 42.18 kB \u2502 gzip: 8.92 kB<br>dist\/dashboard.js 327.45 kB \u2502 gzip: 98.27 kB<br>\u2713 built in 2.31s        <\/div>\n    <\/div>\n    \n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Verifying the Build<\/strong><\/h2>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Confirm Files Exist<\/strong><\/h5>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">ls -lh dist\/\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<p>You should see:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>dashboard.js<\/code><\/li>\n\n\n\n<li><code>dashboard.css<\/code><\/li>\n\n\n\n<li><code>manifest.json<\/code><\/li>\n\n\n\n<li><code>assets\/<\/code><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Preview the Production Build<\/strong><\/h5>\n\n\n\n<p>Test locally before deployment:<\/p>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">npm run preview\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<p>This starts a local server that simulates production.<\/p>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">http:\/\/localhost:4173\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Build Configuration<\/strong><\/h2>\n\n\n\n<p>Located in <code>vite.config.js<\/code>:<\/p>\n\n\n    <div class=\"docsy-alert-block alert-info\">\n                    <div class=\"alert-icon\">\n                <i class=\"ph-fill ph-info\"><\/i>\n            <\/div>\n                <div class=\"alert-content\">\n            export default {<br>build: {<br>outDir: &#8216;dist&#8217;,<br>sourcemap: false,<br>assetsDir: &#8216;assets&#8217;,<br>minify: &#8216;esbuild&#8217;,<br>rollupOptions: {<br>output: {<br>entryFileNames: &#8216;[name].js&#8217;,<br>assetFileNames: &#8216;[name].[ext]&#8217;,<br>}<br>}<br>}<br>}        <\/div>\n    <\/div>\n    \n\n\n<h5 class=\"wp-block-heading\"><strong>Enable Source Maps (Debug Only)<\/strong><\/h5>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">build: { sourcemap: true }\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<p>\u26a0 Do not enable source maps in public production releases.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Development vs Production<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Feature<\/th><th>Development<\/th><th>Production<\/th><\/tr><\/thead><tbody><tr><td>HMR<\/td><td>\u2705<\/td><td>\u274c<\/td><\/tr><tr><td>File Size<\/td><td>Large<\/td><td>Optimized<\/td><\/tr><tr><td>Performance<\/td><td>Lower<\/td><td>High<\/td><\/tr><tr><td>Debugging<\/td><td>Easy<\/td><td>Limited<\/td><\/tr><tr><td>Use Case<\/td><td>Development<\/td><td>Live Site<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Deploying to WordPress<\/strong><\/h2>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Asset Loading Logic<\/strong><\/h5>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Scenario<\/th><th>WordPress Loads<\/th><\/tr><\/thead><tbody><tr><td>Dev server running<\/td><td>Files from <code>localhost:8080<\/code><\/td><\/tr><tr><td>Dev server stopped<\/td><td>Files from <code>dist\/<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Deployment Steps<\/strong><\/h5>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Build<\/strong><br>npm run build<\/li>\n\n\n\n<li><strong>Upload plugin (including <code>dist\/<\/code>)<\/strong><\/li>\n\n\n\n<li><strong>Clear caches<\/strong> (browser, WordPress, CDN)<\/li>\n\n\n\n<li><strong>Hard refresh<\/strong> the browser<\/li>\n\n\n\n<li><strong>Check console<\/strong> for errors<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Optimization Tips<\/strong><\/h2>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Analyze Bundle Size<\/strong><\/h5>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">npm install --save-dev rollup-plugin-visualizer\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<h5 class=\"wp-block-heading\"><strong>Add to config:<\/strong><\/h5>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">import { visualizer } from &#039;rollup-plugin-visualizer&#039;;\n\nplugins: [visualizer({ open: true, gzipSize: true })]\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                            <span class=\"line-number\">3<\/span>\n                                            <span class=\"line-number\">4<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Code Splitting Example<\/strong><\/h5>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">const HeavyComponent = lazy(() =&gt; import(&#039;.\/HeavyComponent&#039;));\n\n&lt;Suspense fallback={}&gt;\n  \n\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                            <span class=\"line-number\">3<\/span>\n                                            <span class=\"line-number\">4<\/span>\n                                            <span class=\"line-number\">5<\/span>\n                                            <span class=\"line-number\">6<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Reduce Dependency Size<\/strong><\/h5>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">npm dedupe\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<p>Avoid large unnecessary libraries.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Troubleshooting<\/strong><\/h2>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Build Fails<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Fix syntax errors<\/li>\n\n\n\n<li>Run <code>npm install<\/code><\/li>\n\n\n\n<li>Check missing imports<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Site Broken After Build<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Clear all caches<\/li>\n\n\n\n<li>Check browser console<\/li>\n\n\n\n<li>Confirm files uploaded to <code>dist\/<\/code><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Build Checklist<\/strong><\/h2>\n\n\n\n<p>Before going live:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Build succeeds<\/li>\n\n\n\n<li>Preview tested<\/li>\n\n\n\n<li>No console errors<\/li>\n\n\n\n<li>All features verified<\/li>\n\n\n\n<li>Caches cleared<\/li>\n\n\n\n<li>Mobile tested<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Quick Commands<\/strong><\/h2>\n\n\n\n<p><strong>Build<\/strong><\/p>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">npm run build\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<p><strong>Preview<\/strong><\/p>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">npm run preview\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<p><strong>Check Output<\/strong><\/p>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">ls -lh dist\/\n<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                            <span class=\"line-number\">2<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    <\/div>","protected":false},"excerpt":{"rendered":"<p>Learn how to generate optimized production builds of your customizations. Quick Start Build your project for deployment: That\u2019s 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: 3. Output Structure Build Process Explained Step 1 &#8211; [&hellip;]<\/p>\n","protected":false},"author":12,"featured_media":0,"parent":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[82],"tags":[],"class_list":["post-2933","post","type-post","status-publish","format-standard","hentry","category-development-workflow"],"featured_image_src":null,"author_info":{"display_name":"wordpressadminiq","author_link":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/author\/wordpressadminiq\/"},"_links":{"self":[{"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/posts\/2933","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/comments?post=2933"}],"version-history":[{"count":2,"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/posts\/2933\/revisions"}],"predecessor-version":[{"id":2936,"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/posts\/2933\/revisions\/2936"}],"wp:attachment":[{"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/media?parent=2933"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/categories?post=2933"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/tags?post=2933"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}