1"use strict";(globalThis.webpackChunkspeedvitals_blog=globalThis.webpackChunkspeedvitals_blog||[]).push([[2705],{20472(e,t,i){i.r(t),i.d(t,{assets:()=>c,contentTitle:()=>r,default:()=>d,frontMatter:()=>s,metadata:()=>a,toc:()=>p});var a=i(31931),n=i(74848),o=i(28453);const s={title:"How I Optimized the Performance of My Vite + React Website",authors:["kashish"],description:"A practical Vite and React performance optimization case study covering code splitting, AVIF images, route prefetching, API caching, and Cloudflare Pages.",tags:["optimization"],date:new Date("2026-08-13T00:00:00.000Z"),image:"./img/vite-react-website-optimization.jpg"},r=void 0,c={image:i(62292).A,authorsImageUrls:[void 0]},p=[];function l(e){const t={img:"img",p:"p",...(0,o.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"Vite + Reach Website Speed Optimization",src:i(91403).A+"",width:"1672",height:"941"})}),"\n",(0,n.jsx)(t.p,{children:"When I started building Moon Dasha, a SaaS platform powered by Vedic Astrology, I chose Vite, React, and TypeScript because I wanted a fast development workflow without giving up the flexibility required for a large web application."}),"\n",(0,n.jsx)(t.p,{children:"Vite kept development quick, and the first version of the website loaded well. But as the application grew to include more calculators, reports, result tabs, blog posts, and images, its production performance required a lot more attention."})]})}function d(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(l,{...e})}):l(e)}},62292(e,t,i){i.d(t,{A:()=>a});const a=i.p+"assets/images/vite-react-website-optimization-cc1cf3aca8c0eb4ba9ad3e5d73b7bb90.jpg"},91403(e,t,i){i.d(t,{A:()=>a});const a=i.p+"assets/images/vite-react-website-optimization-cc1cf3aca8c0eb4ba9ad3e5d73b7bb90.jpg"},28453(e,t,i){i.d(t,{R:()=>s,x:()=>r});var a=i(96540);const n={},o=a.createContext(n);function s(e){const t=a.useContext(o);return a.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:s(e.components),a.createElement(o.Provider,{value:t},e.children)}},31931(e){e.exports=JSON.parse('{"permalink":"/blog/vite-react-performance-optimization","source":"@site/blog/vite-react-performance-optimization/index.mdx","title":"How I Optimized the Performance of My Vite + React Website","description":"A practical Vite and React performance optimization case study covering code splitting, AVIF images, route prefetching, API caching, and Cloudflare Pages.","date":"2026-08-13T00:00:00.000Z","tags":[{"inline":false,"label":"Optimization","permalink":"/blog/tags/optimization","description":"Learn Optimizations and Web Performance Strategies"}],"readingTime":14.62,"hasTruncateMarker":true,"authors":[{"name":"Kashish Kumawat","title":"CEO @ SpeedVitals","url":"https://www.linkedin.com/in/kashishkumawat/","socials":{"linkedin":"https://www.linkedin.com/in/kashishkumawat/","x":"https://x.com/im_kashish","website":"https://kashishkumawat.com"},"imageURL":"/blog/img/kashish-kumawat.jpeg","key":"kashish","page":null}],"frontMatter":{"title":"How I Optimized the Performance of My Vite + React Website","authors":["kashish"],"description":"A practical Vite and React performance optimization case study covering code splitting, AVIF images, route prefetching, API caching, and Cloudflare Pages.","tags":["optimization"],"date":"2026-08-13T00:00:00.000Z","image":"./img/vite-react-website-optimization.jpg"},"unlisted":false,"lastUpdatedAt":1786630883000,"prevItem":{"title":"Before You Launch a Shopify Store - Legal, Hosting, and Performance Considerations","permalink":"/blog/before-you-launch-shopify-store"},"nextItem":{"title":"7 Best Internal Linking Plugins for WordPress","permalink":"/blog/internal-linking-plugins-wordpress"}}')}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.