[{"data":1,"prerenderedAt":1227},["ShallowReactive",2],{"blog-vite-8-rolldown-react-performance/":3},{"id":4,"title":5,"body":6,"description":1181,"extension":1182,"faqs":1183,"image":1199,"imageAlt":1200,"imageCaption":1201,"meta":1202,"navigation":650,"path":1203,"publishedAt":1204,"readingTime":828,"references":1205,"seo":1218,"stem":1219,"tags":1220,"updatedAt":1204,"__hash__":1226},"blog/blog/vite-8-rolldown-react-performance.md","Vite 8 and Rolldown: What Actually Changes for React Apps",{"type":7,"value":8,"toc":1160},"minimark",[9,13,22,30,36,41,92,96,99,199,202,205,209,212,238,241,267,270,273,277,280,285,293,300,317,320,333,337,342,372,375,383,387,394,491,494,527,530,553,556,560,563,598,601,685,688,714,717,721,728,740,743,747,754,849,852,863,874,878,881,886,913,916,920,947,950,954,957,970,973,993,997,1000,1020,1023,1027,1030,1047,1050,1054,1057,1083,1086,1090,1125,1128,1132,1135,1138,1150,1153,1156],[10,11,12],"p",{},"Vite 8 is a significant release for React teams, but probably not in the way most people expect.",[10,14,15,16,21],{},"It will not automatically improve your ",[17,18,20],"a",{"href":19},"/blog/how-to-improve-lcp/","Largest Contentful Paint",". It will not shrink a 500KB chart library, fix an overloaded main thread, or make a slow third-party script go away. Your users do not care which bundler produced the JavaScript — they care how fast it loads and responds.",[10,23,24,25,29],{},"What Vite 8 does is change the build pipeline. It moves Vite onto ",[26,27,28],"strong",{},"Rolldown",", a Rust-based bundler built by the VoidZero team, with the production build path being the most immediate place React teams will notice it. That makes this less of a typical major version bump and more of a build-machinery swap. For teams where CI build time is a real cost — or where production builds are painful enough that developers avoid running them locally — this is the release to test.",[10,31,32,33],{},"The right question is not just \"is Vite 8 faster?\" It is: ",[26,34,35],{},"does upgrading make this React app faster to build without changing what we ship to users in a bad way?",[37,38,40],"h2",{"id":39},"what-you-need-to-know-upfront","What you need to know upfront",[42,43,44,51,70,76,86],"ul",{},[45,46,47,50],"li",{},[26,48,49],{},"Production builds can get significantly faster."," Vite cites 10–30x faster bundling in benchmarks vs Rollup, with real-world examples from Linear (46s → 6s), Ramp (−57%), and Beehiiv (−64%).",[45,52,53,56,57,61,62,61,65,69],{},[26,54,55],{},"This is build performance, not automatic Core Web Vitals improvement."," ",[17,58,60],{"href":59},"/blog/improve-inp-score/","INP",", ",[17,63,64],{"href":19},"LCP",[17,66,68],{"href":67},"/blog/fix-cumulative-layout-shift/","CLS",", and JavaScript bundle size still need separate measurement.",[45,71,72,75],{},[26,73,74],{},"Most small-to-medium React apps can test the upgrade directly."," Apps with heavy Rollup config, custom plugins, library mode, monorepos, or SSR should move more carefully.",[45,77,78,56,81,85],{},[26,79,80],{},"The React plugin changed.",[82,83,84],"code",{},"@vitejs/plugin-react"," v6 uses Oxc for React Refresh and removes Babel from the default path.",[45,87,88,91],{},[26,89,90],{},"Benchmark before and after."," Capture build time, output sizes, chunk counts, and a Lighthouse run before calling the migration done.",[37,93,95],{"id":94},"vite-7-vs-vite-8-what-changed-under-the-hood","Vite 7 vs Vite 8: what changed under the hood",[10,97,98],{},"Vite's original architecture split work between two separate tools:",[100,101,102,117],"table",{},[103,104,105],"thead",{},[106,107,108,111,114],"tr",{},[109,110],"th",{},[109,112,113],{},"Vite 7 (and earlier)",[109,115,116],{},"Vite 8",[118,119,120,134,147,160,173,186],"tbody",{},[106,121,122,128,131],{},[123,124,125],"td",{},[26,126,127],{},"Dev server path",[123,129,130],{},"esbuild-heavy fast transforms",[123,132,133],{},"Same familiar dev-server model, with Vite moving toward a Rolldown/Oxc toolchain",[106,135,136,141,144],{},[123,137,138],{},[26,139,140],{},"Production bundler",[123,142,143],{},"Rollup (JavaScript)",[123,145,146],{},"Rolldown (Rust)",[106,148,149,154,157],{},[123,150,151],{},[26,152,153],{},"Plugin API",[123,155,156],{},"Rollup + Vite plugins",[123,158,159],{},"Rolldown-compatible, Rollup-compatible",[106,161,162,167,170],{},[123,163,164],{},[26,165,166],{},"React plugin",[123,168,169],{},"@vitejs/plugin-react v5 (Babel by default)",[123,171,172],{},"@vitejs/plugin-react v6 (Oxc by default)",[106,174,175,180,183],{},[123,176,177],{},[26,178,179],{},"Build speed",[123,181,182],{},"Good",[123,184,185],{},"Faster for production builds",[106,187,188,193,196],{},[123,189,190],{},[26,191,192],{},"Dev/prod parity",[123,194,195],{},"More split between dev and production internals",[123,197,198],{},"Moving toward fewer split-pipeline edge cases",[10,200,201],{},"That two-tool split — esbuild for dev, Rollup for prod — was a deliberate pragmatic choice. esbuild is very fast but lacks some of Rollup's plugin ecosystem and tree-shaking sophistication. Rollup is thorough but written in JavaScript, which caps its speed.",[10,203,204],{},"Rolldown is designed to close that gap: native-speed bundling with a Rollup-compatible plugin API. Over time it also aims to unify the dev and production transform paths, which should reduce the class of \"works in dev, breaks in prod\" edge cases.",[37,206,208],{"id":207},"how-much-faster-is-vite-8-in-practice","How much faster is Vite 8 in practice?",[10,210,211],{},"The numbers Vite cites in their announcement are from the Rolldown beta and preview period, not from a controlled lab:",[42,213,214,220,226,232],{},[45,215,216,219],{},[26,217,218],{},"Linear:"," 46s → 6s production build",[45,221,222,225],{},[26,223,224],{},"Ramp:"," 57% reduction",[45,227,228,231],{},[26,229,230],{},"Mercedes-Benz.io:"," up to 38% reduction",[45,233,234,237],{},[26,235,236],{},"Beehiiv:"," 64% reduction",[10,239,240],{},"These are real companies with large apps, and the gains are big enough to pay attention to. But the specific win for any given project depends on:",[42,242,243,246,249,252,255,258,261,264],{},[45,244,245],{},"total module count",[45,247,248],{},"number of routes and code-split boundaries",[45,250,251],{},"TypeScript/JSX transformation volume",[45,253,254],{},"source map settings",[45,256,257],{},"plugin count and complexity",[45,259,260],{},"custom Rollup options",[45,262,263],{},"dependency graph shape (deep trees, lots of CJS, etc.)",[45,265,266],{},"CI CPU and filesystem I/O speed",[10,268,269],{},"A 40-second app might become a 12-second app. A 4-second app might become a 3-second app. A plugin-heavy app might need config fixes before it builds at all.",[10,271,272],{},"The biggest wins tend to show up where the current build is slow enough that developers actively avoid running it locally.",[37,274,276],{"id":275},"build-performance-vs-core-web-vitals-the-distinction-that-matters","Build performance vs Core Web Vitals: the distinction that matters",[10,278,279],{},"This is the point worth being explicit about, because build-tool upgrade posts often blur it.",[10,281,282],{},[26,283,284],{},"Faster builds ≠ faster pages.",[10,286,287,288,292],{},"Vite 8 can reduce the time it takes to ",[289,290,291],"em",{},"produce"," your output assets. That is genuinely valuable — but your user's browser never sees Rolldown. It sees JavaScript files, CSS, images, and network requests.",[10,294,295,296,299],{},"What actually determines ",[17,297,298],{"href":19},"Core Web Vitals"," after a Vite upgrade:",[42,301,302,305,308,311,314],{},[45,303,304],{},"Did the main JS bundle get smaller or larger?",[45,306,307],{},"Did chunk splitting change in a way that adds or removes request overhead?",[45,309,310],{},"Did the LCP element's preload behavior change?",[45,312,313],{},"Did tree-shaking improve or regress for any key dependency?",[45,315,316],{},"Did long tasks on a mid-range device change?",[10,318,319],{},"A clean Vite 8 migration can improve build or CI time by 50% with zero effect on Lighthouse scores — and that's a good outcome. Just do not write \"we upgraded Vite, therefore the site is faster for users\" without measuring the actual output.",[10,321,322,323,327,328,332],{},"If you want to reduce bundle size as a separate concern, see the ",[17,324,326],{"href":325},"/blog/vite-react-performance/","Vite React performance guide"," for manual chunking, lazy loading, and compression strategies that directly affect what users download. For bundle analysis in general, the ",[17,329,331],{"href":330},"/blog/nextjs-bundle-size/","Next.js bundle size guide"," covers approaches that apply across frameworks too.",[37,334,336],{"id":335},"the-react-plugin-changes-in-vite-8","The React plugin changes in Vite 8",[10,338,339,341],{},[82,340,84],{}," v6 is the version that ships with Vite 8, and it changes a few things:",[42,343,344,350,363],{},[45,345,346,349],{},[26,347,348],{},"Oxc replaces Babel for React Refresh"," — this is faster, but it also means Babel is no longer a default dependency",[45,351,352,355,356,359,360],{},[26,353,354],{},"React Compiler needs explicit setup"," — projects that need React Compiler should use the ",[82,357,358],{},"reactCompilerPreset"," helper with ",[82,361,362],{},"@rolldown/plugin-babel",[45,364,365,371],{},[26,366,367,370],{},[82,368,369],{},"@vitejs/plugin-react-swc"," is a separate question"," — Vite 8's standard plugin already uses Oxc, so the old \"SWC is faster than Babel\" advice needs revisiting; check current plugin guidance for your specific needs",[10,373,374],{},"The important point: upgrading Vite without checking the React plugin behavior is how migrations cause subtle runtime regressions. React Refresh is how HMR works in dev. Any change there deserves explicit testing.",[10,376,377,378,382],{},"For ",[17,379,381],{"href":380},"/blog/react-performance-optimization/","React performance optimization"," work with React Compiler: upgrade Vite first, verify the build, then add React Compiler separately. Do not combine both in one commit unless the app is very small.",[37,384,386],{"id":385},"what-to-do-before-upgrading","What to do before upgrading",[10,388,389,390,393],{},"Capture a baseline before touching ",[82,391,392],{},"package.json",". At minimum:",[395,396,401],"pre",{"className":397,"code":398,"language":399,"meta":400,"style":400},"language-bash shiki shiki-themes github-light github-dark","rm -rf dist\n/usr/bin/time -p npm run build\nfind dist/assets -type f \\( -name '*.js' -o -name '*.css' \\) | sort\ndu -sh dist\n","bash","",[82,402,403,420,438,480],{"__ignoreMap":400},[404,405,408,412,416],"span",{"class":406,"line":407},"line",1,[404,409,411],{"class":410},"sScJk","rm",[404,413,415],{"class":414},"sj4cs"," -rf",[404,417,419],{"class":418},"sZZnC"," dist\n",[404,421,423,426,429,432,435],{"class":406,"line":422},2,[404,424,425],{"class":410},"/usr/bin/time",[404,427,428],{"class":414}," -p",[404,430,431],{"class":418}," npm",[404,433,434],{"class":418}," run",[404,436,437],{"class":418}," build\n",[404,439,441,444,447,450,453,456,459,462,465,467,470,473,477],{"class":406,"line":440},3,[404,442,443],{"class":410},"find",[404,445,446],{"class":418}," dist/assets",[404,448,449],{"class":414}," -type",[404,451,452],{"class":418}," f",[404,454,455],{"class":414}," \\(",[404,457,458],{"class":414}," -name",[404,460,461],{"class":418}," '*.js'",[404,463,464],{"class":414}," -o",[404,466,458],{"class":414},[404,468,469],{"class":418}," '*.css'",[404,471,472],{"class":414}," \\)",[404,474,476],{"class":475},"szBVR"," |",[404,478,479],{"class":410}," sort\n",[404,481,483,486,489],{"class":406,"line":482},4,[404,484,485],{"class":410},"du",[404,487,488],{"class":414}," -sh",[404,490,419],{"class":418},[10,492,493],{},"Also run whatever checks your project has:",[395,495,497],{"className":397,"code":496,"language":399,"meta":400,"style":400},"npm run typecheck\nnpm run test\nnpm run lint\n",[82,498,499,509,518],{"__ignoreMap":400},[404,500,501,504,506],{"class":406,"line":407},[404,502,503],{"class":410},"npm",[404,505,434],{"class":418},[404,507,508],{"class":418}," typecheck\n",[404,510,511,513,515],{"class":406,"line":422},[404,512,503],{"class":410},[404,514,434],{"class":418},[404,516,517],{"class":418}," test\n",[404,519,520,522,524],{"class":406,"line":440},[404,521,503],{"class":410},[404,523,434],{"class":418},[404,525,526],{"class":418}," lint\n",[10,528,529],{},"Record:",[42,531,532,535,538,541,544,547,550],{},[45,533,534],{},"build wall-clock time",[45,536,537],{},"total output size",[45,539,540],{},"largest JS chunk",[45,542,543],{},"largest CSS file",[45,545,546],{},"number of JS and CSS files",[45,548,549],{},"source map size if enabled",[45,551,552],{},"a quick Lighthouse or WebPageTest run on a key page",[10,554,555],{},"The goal is not a lab benchmark — it is having actual numbers to compare after the upgrade so you are not guessing whether anything changed.",[37,557,559],{"id":558},"upgrade-path-for-a-standard-react-app","Upgrade path for a standard React app",[10,561,562],{},"For most apps, start here:",[395,564,566],{"className":397,"code":565,"language":399,"meta":400,"style":400},"npm install vite@latest @vitejs/plugin-react@latest\nnpm run build\nnpm run preview\n",[82,567,568,581,589],{"__ignoreMap":400},[404,569,570,572,575,578],{"class":406,"line":407},[404,571,503],{"class":410},[404,573,574],{"class":418}," install",[404,576,577],{"class":418}," vite@latest",[404,579,580],{"class":418}," @vitejs/plugin-react@latest\n",[404,582,583,585,587],{"class":406,"line":422},[404,584,503],{"class":410},[404,586,434],{"class":418},[404,588,437],{"class":418},[404,590,591,593,595],{"class":406,"line":440},[404,592,503],{"class":410},[404,594,434],{"class":418},[404,596,597],{"class":418}," preview\n",[10,599,600],{},"A minimal config still looks the same:",[395,602,606],{"className":603,"code":604,"language":605,"meta":400,"style":400},"language-ts shiki shiki-themes github-light github-dark","// vite.config.ts\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\n\nexport default defineConfig({\n  plugins: [react()],\n});\n","ts",[82,607,608,614,632,646,652,667,679],{"__ignoreMap":400},[404,609,610],{"class":406,"line":407},[404,611,613],{"class":612},"sJ8bj","// vite.config.ts\n",[404,615,616,619,623,626,629],{"class":406,"line":422},[404,617,618],{"class":475},"import",[404,620,622],{"class":621},"sVt8B"," { defineConfig } ",[404,624,625],{"class":475},"from",[404,627,628],{"class":418}," 'vite'",[404,630,631],{"class":621},";\n",[404,633,634,636,639,641,644],{"class":406,"line":440},[404,635,618],{"class":475},[404,637,638],{"class":621}," react ",[404,640,625],{"class":475},[404,642,643],{"class":418}," '@vitejs/plugin-react'",[404,645,631],{"class":621},[404,647,648],{"class":406,"line":482},[404,649,651],{"emptyLinePlaceholder":650},true,"\n",[404,653,655,658,661,664],{"class":406,"line":654},5,[404,656,657],{"class":475},"export",[404,659,660],{"class":475}," default",[404,662,663],{"class":410}," defineConfig",[404,665,666],{"class":621},"({\n",[404,668,670,673,676],{"class":406,"line":669},6,[404,671,672],{"class":621},"  plugins: [",[404,674,675],{"class":410},"react",[404,677,678],{"class":621},"()],\n",[404,680,682],{"class":406,"line":681},7,[404,683,684],{"class":621},"});\n",[10,686,687],{},"If the build passes, run the production preview and walk through your real routes — not just the homepage:",[42,689,690,693,696,699,702,705,708,711],{},[45,691,692],{},"lazy-loaded routes",[45,694,695],{},"dynamic imports",[45,697,698],{},"SVG imports",[45,700,701],{},"worker imports",[45,703,704],{},"CSS modules",[45,706,707],{},"auth-gated routes",[45,709,710],{},"pages with charts, editors, or maps",[45,712,713],{},"source maps (if enabled)",[10,715,716],{},"Build tools are very good at making 95% of a site work while hiding one broken edge case in the remaining 5%.",[37,718,720],{"id":719},"upgrade-path-for-large-or-complex-apps","Upgrade path for large or complex apps",[10,722,723,724,727],{},"For apps with custom ",[82,725,726],{},"rollupOptions",", custom plugins, library mode, monorepos, unusual CommonJS dependencies, or manual chunking, use a staged approach:",[729,730,731,734,737],"ol",{},[45,732,733],{},"From your current Vite 7 setup, test Rolldown-specific behavior first using Vite's migration guide before doing the full major upgrade.",[45,735,736],{},"Fix any Rolldown compatibility issues.",[45,738,739],{},"Then upgrade to Vite 8.",[10,741,742],{},"This is worth the extra step whenever your build config is complex enough that a blind bump has meaningful risk.",[37,744,746],{"id":745},"check-your-manual-chunk-config","Check your manual chunk config",[10,748,749,750,753],{},"Many React apps split vendor code with ",[82,751,752],{},"manualChunks",":",[395,755,757],{"className":603,"code":756,"language":605,"meta":400,"style":400},"// vite.config.ts\nexport default defineConfig({\n  build: {\n    rollupOptions: {\n      output: {\n        manualChunks: {\n          react: ['react', 'react-dom'],\n          charts: ['recharts'],\n        },\n      },\n    },\n  },\n});\n",[82,758,759,763,773,778,783,788,793,809,820,826,832,838,844],{"__ignoreMap":400},[404,760,761],{"class":406,"line":407},[404,762,613],{"class":612},[404,764,765,767,769,771],{"class":406,"line":422},[404,766,657],{"class":475},[404,768,660],{"class":475},[404,770,663],{"class":410},[404,772,666],{"class":621},[404,774,775],{"class":406,"line":440},[404,776,777],{"class":621},"  build: {\n",[404,779,780],{"class":406,"line":482},[404,781,782],{"class":621},"    rollupOptions: {\n",[404,784,785],{"class":406,"line":654},[404,786,787],{"class":621},"      output: {\n",[404,789,790],{"class":406,"line":669},[404,791,792],{"class":621},"        manualChunks: {\n",[404,794,795,798,801,803,806],{"class":406,"line":681},[404,796,797],{"class":621},"          react: [",[404,799,800],{"class":418},"'react'",[404,802,61],{"class":621},[404,804,805],{"class":418},"'react-dom'",[404,807,808],{"class":621},"],\n",[404,810,812,815,818],{"class":406,"line":811},8,[404,813,814],{"class":621},"          charts: [",[404,816,817],{"class":418},"'recharts'",[404,819,808],{"class":621},[404,821,823],{"class":406,"line":822},9,[404,824,825],{"class":621},"        },\n",[404,827,829],{"class":406,"line":828},10,[404,830,831],{"class":621},"      },\n",[404,833,835],{"class":406,"line":834},11,[404,836,837],{"class":621},"    },\n",[404,839,841],{"class":406,"line":840},12,[404,842,843],{"class":621},"  },\n",[404,845,847],{"class":406,"line":846},13,[404,848,684],{"class":621},[10,850,851],{},"This config may still work after the upgrade, but it deserves explicit verification. Rolldown's chunking behavior is not identical to Rollup's, and chunking decisions have real user-facing effects:",[42,853,854,857,860],{},[45,855,856],{},"better caching and route-level splitting can reduce repeated downloads",[45,858,859],{},"too many small chunks add request round-trip overhead",[45,861,862],{},"large vendor chunks can block initial parse time",[10,864,865,866,869,870,873],{},"After upgrading, compare ",[82,867,868],{},"find dist/assets -type f | sort"," before and after. Look for unexpectedly large or small chunks, changes in the number of output files, and any changed preload hints in ",[82,871,872],{},"index.html",".",[37,875,877],{"id":876},"benchmark-checklist","Benchmark checklist",[10,879,880],{},"Run this before and after the upgrade.",[882,883,885],"h3",{"id":884},"build-time","Build time",[395,887,889],{"className":397,"code":888,"language":399,"meta":400,"style":400},"rm -rf dist && /usr/bin/time -p npm run build\n",[82,890,891],{"__ignoreMap":400},[404,892,893,895,897,900,903,905,907,909,911],{"class":406,"line":407},[404,894,411],{"class":410},[404,896,415],{"class":414},[404,898,899],{"class":418}," dist",[404,901,902],{"class":621}," && ",[404,904,425],{"class":410},[404,906,428],{"class":414},[404,908,431],{"class":418},[404,910,434],{"class":418},[404,912,437],{"class":418},[10,914,915],{},"Run it more than once locally — machines are noisy. CI time is more reliable.",[882,917,919],{"id":918},"output-comparison","Output comparison",[395,921,923],{"className":397,"code":922,"language":399,"meta":400,"style":400},"du -sh dist\nfind dist/assets -type f | sort\n",[82,924,925,933],{"__ignoreMap":400},[404,926,927,929,931],{"class":406,"line":407},[404,928,485],{"class":410},[404,930,488],{"class":414},[404,932,419],{"class":418},[404,934,935,937,939,941,943,945],{"class":406,"line":422},[404,936,443],{"class":410},[404,938,446],{"class":418},[404,940,449],{"class":414},[404,942,452],{"class":418},[404,944,476],{"class":475},[404,946,479],{"class":410},[10,948,949],{},"Check total size, largest JS file, number of JS/CSS files, and source map size.",[882,951,953],{"id":952},"runtime-performance","Runtime performance",[10,955,956],{},"Test from a production preview, not the dev server:",[395,958,960],{"className":397,"code":959,"language":399,"meta":400,"style":400},"npm run preview\n",[82,961,962],{"__ignoreMap":400},[404,963,964,966,968],{"class":406,"line":407},[404,965,503],{"class":410},[404,967,434],{"class":418},[404,969,597],{"class":418},[10,971,972],{},"Run Lighthouse or Chrome DevTools on key pages. Focus on:",[42,974,975,980,985,990],{},[45,976,977,979],{},[17,978,64],{"href":19}," — did the critical resource load path change?",[45,981,982,984],{},[17,983,60],{"href":59}," / Total Blocking Time — did long tasks change?",[45,986,987,989],{},[17,988,68],{"href":67}," — any layout shift regressions?",[45,991,992],{},"JavaScript transfer size — did the bundle grow or shrink?",[882,994,996],{"id":995},"functional-smoke-test","Functional smoke test",[10,998,999],{},"Actually click through:",[42,1001,1002,1005,1008,1011,1014,1017],{},[45,1003,1004],{},"homepage",[45,1006,1007],{},"a lazy-loaded route",[45,1009,1010],{},"a dashboard or data-heavy page",[45,1012,1013],{},"a form with validation",[45,1015,1016],{},"any auth-gated route",[45,1018,1019],{},"any page with modals or overlays",[10,1021,1022],{},"Bundler migration bugs show up in real routes, not in Lighthouse scores.",[37,1024,1026],{"id":1025},"when-to-wait-on-the-upgrade","When to wait on the upgrade",[10,1028,1029],{},"Hold off or isolate the migration if:",[42,1031,1032,1035,1038,1041,1044],{},[45,1033,1034],{},"you are within a few days of a major release",[45,1036,1037],{},"your Vite config has a lot of Rollup-specific customization that you have not tested",[45,1039,1040],{},"you are also mid-migration on React Router, React Compiler, or another core dependency",[45,1042,1043],{},"your app uses SSR or edge runtimes (more surface area for bundler behavior to matter)",[45,1045,1046],{},"test coverage is thin enough that you would not catch a runtime regression",[10,1048,1049],{},"A build-tool migration is supposed to reduce friction. If it arrives during a risky window, it becomes the friction.",[37,1051,1053],{"id":1052},"what-developers-actually-gain","What developers actually gain",[10,1055,1056],{},"Even if Core Web Vitals stay completely flat, a Vite 8 upgrade can be a real win:",[42,1058,1059,1065,1071,1077],{},[45,1060,1061,1064],{},[26,1062,1063],{},"Local production builds become fast enough to run regularly"," — instead of being something developers skip",[45,1066,1067,1070],{},[26,1068,1069],{},"CI feedback arrives faster"," — which compresses the release loop",[45,1072,1073,1076],{},[26,1074,1075],{},"Bundle analysis becomes less painful"," — so it happens more often",[45,1078,1079,1082],{},[26,1080,1081],{},"Preview deployments are quicker"," — making staging review more practical",[10,1084,1085],{},"This is the unglamorous side of frontend performance. The fastest user experience is built by teams whose tooling does not slow down the work of shipping it.",[37,1087,1089],{"id":1088},"recommended-migration-plan","Recommended migration plan",[729,1091,1092,1098,1101,1107,1110,1113,1116,1119,1122],{},[45,1093,1094,1095],{},"Create a branch: ",[82,1096,1097],{},"upgrade/vite-8-rolldown",[45,1099,1100],{},"Capture build time and output sizes on the current branch",[45,1102,1103,1104],{},"Upgrade: ",[82,1105,1106],{},"npm install vite@latest @vitejs/plugin-react@latest",[45,1108,1109],{},"Run typecheck, tests, lint, build, and preview",[45,1111,1112],{},"Compare output chunks and sizes against the baseline",[45,1114,1115],{},"Smoke test real routes",[45,1117,1118],{},"Run Lighthouse on key pages",[45,1120,1121],{},"Fix any config or plugin issues",[45,1123,1124],{},"Merge when build performance improves and runtime output is stable",[10,1126,1127],{},"For complex apps, add a step zero: test Rolldown behavior on Vite 7 first, using Vite's migration guide, before the full major upgrade.",[37,1129,1131],{"id":1130},"bottom-line","Bottom line",[10,1133,1134],{},"Vite 8 is worth testing if production builds or CI time are already painful. The Rolldown switch is real, and the real-world build-time numbers from large apps are meaningful.",[10,1136,1137],{},"The distinction that matters:",[42,1139,1140,1145],{},[45,1141,1142],{},[26,1143,1144],{},"Rolldown can make your build faster.",[45,1146,1147],{},[26,1148,1149],{},"It does not automatically make your pages faster for users.",[10,1151,1152],{},"Both of those can be true simultaneously. Faster builds make it easier to do performance work — bundle analysis less annoying, previews less painful, CI feedback shorter. That indirectly benefits users, but it is not the same as shipping a smaller bundle.",[10,1154,1155],{},"Baseline first, upgrade second, measure the output. If the build drops from 40 seconds to 10 and the bundle stays clean, take the win. If the bundle changes in unexpected ways, slow down and inspect it — because build speed only matters if what you build is still what you meant to ship.",[1157,1158,1159],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}",{"title":400,"searchDepth":422,"depth":422,"links":1161},[1162,1163,1164,1165,1166,1167,1168,1169,1170,1171,1177,1178,1179,1180],{"id":39,"depth":422,"text":40},{"id":94,"depth":422,"text":95},{"id":207,"depth":422,"text":208},{"id":275,"depth":422,"text":276},{"id":335,"depth":422,"text":336},{"id":385,"depth":422,"text":386},{"id":558,"depth":422,"text":559},{"id":719,"depth":422,"text":720},{"id":745,"depth":422,"text":746},{"id":876,"depth":422,"text":877,"children":1172},[1173,1174,1175,1176],{"id":884,"depth":440,"text":885},{"id":918,"depth":440,"text":919},{"id":952,"depth":440,"text":953},{"id":995,"depth":440,"text":996},{"id":1025,"depth":422,"text":1026},{"id":1052,"depth":422,"text":1053},{"id":1088,"depth":422,"text":1089},{"id":1130,"depth":422,"text":1131},"Vite 8 swaps Rollup for Rolldown, a Rust-based bundler. Learn what gets faster, what stays the same, and how to migrate a React app without breaking your production bundle.","md",[1184,1187,1190,1193,1196],{"question":1185,"answer":1186},"Does Vite 8 make React apps faster for users?","Not automatically. Vite 8 can make builds much faster, but it does not directly improve LCP, INP, or CLS unless the migration changes the JavaScript shipped to users. Treat it as a build performance upgrade first, then measure runtime bundle output separately.",{"question":1188,"answer":1189},"What is Rolldown in Vite 8?","Rolldown is Vite 8's Rust-based bundler. It replaces the old Rollup production-bundling path and reduces Vite's previous split between different build pipelines, while keeping a Rollup-compatible plugin API. The goal is faster builds, more consistent transformation behavior, and a foundation for future dev-server improvements.",{"question":1191,"answer":1192},"Should React projects upgrade to Vite 8 immediately?","Small React apps can usually test a direct upgrade. Large apps, custom Rollup configs, monorepos, library builds, and plugin-heavy projects should benchmark first and use a gradual migration path. Run typecheck, tests, production build, preview smoke tests, and bundle comparison before shipping.",{"question":1194,"answer":1195},"Is Vite 8 faster than Vite 7?","For production builds, many projects will see meaningful improvement. Vite cites real-world reductions including Linear dropping from 46s to 6s and Beehiiv reducing build time by 64%. Your result depends on app size, plugins, and configuration.",{"question":1197,"answer":1198},"Does Vite 8 still work with React Compiler?","Yes. Vite 8 ships @vitejs/plugin-react v6, which uses Oxc for React Refresh and removes Babel from the default path. Projects that need React Compiler can use the plugin's reactCompilerPreset helper with @rolldown/plugin-babel.","/og/vite-8-rolldown-react-performance.png","Vite 8 and Rolldown performance guide for React apps",null,{},"/blog/vite-8-rolldown-react-performance","2026-06-16",[1206,1209,1212,1215],{"title":1207,"url":1208},"Vite 8.0 is out - Vite","https://vite.dev/blog/announcing-vite8",{"title":1210,"url":1211},"Vite 8 Beta announcement - Vite","https://vite.dev/blog/announcing-vite8-beta",{"title":1213,"url":1214},"Vite 7.0 is out - Vite","https://vite.dev/blog/announcing-vite7",{"title":1216,"url":1217},"Performance - Vite Official Docs","https://vite.dev/guide/performance",{"title":5,"description":1181},"blog/vite-8-rolldown-react-performance",[1221,675,1222,1223,1224,1225],"vite","rolldown","build-performance","bundle-size","frontend-performance","Mp-vAhMfM3cwvLTkcpj4ads6lRVvhQV6fcEjHf-nvZA",1783436339752]