?? ? ?? ???? ?? ??? ??????(SPA)? ???? ??? ???? ????? ??? ? ?? ?????. ??? ????? ??? ?? ?? ?? ???? JavaScript ????? ? ??? React? ???? SPA ??? ??????. ??? ?? ??? ???? ? ??? ?? ????? ??? Vite? ??? ??? ?? ? ?? ?????.

? ????? Vite? React? ??? ??? ???? ? ??? ???? SPA? ??? ? ?? ??? ???????. ??? ????? ???? ??? ??????? ???? ??? ??? ???? ?? ????? ????? ??? ???? ??? ???? ??? ??? ???? ? ????.

Vite Over Create React App(CRA)? ??? ??? ??????

???? React ???? React ????? ??? ???? ?? ??? ???? CRA(Create React App)? ?????. CRA? ??? ????? ?? ??? ????? ?? ??? ?? ?? ???? ? ?? ??? ????. Vite? ???? ?? ?? ?????.

Vite? ?? ???? ?? ?? ?? ??? ???? ??? ????? ?? ?????.

? ?? ?? ??: Vite? ?? ?? ?????? ?? ES ?? ???? ????? ?? ??? ??????? ?? ?? ??? ? ????.
??? ???: Vite? ?? ??????? ??? ?? ?? ??? ??? ????? ????? ? ??? ? ?? ??? ? ?????.
??? ???? ???: Vite?? TypeScript, JSX ?? ?? ??? ??? ?? ??? ? ?? ??? ????? ????.

Vite? React ???? ????

1-Node.js ??

???? Node.js? ???? ??? ?????. ??? ???? ??? ? ????.

node -v
npm -v

2-Vite React ???? ???

Vite ? React? ? ????? ????? ?? ??? ?????.

npm create vite@latest my-spa-app --template react

????? ???? ???? ??? ?????.

cd my-spa-app

3- ??? ?? ? ?? ?? ??

????? ??? ? ?? ??? ???? ???.

npm install

?? ?? ??? ???? ?? ??? ?????.

npm run dev

??? ?? ????? http://localhost:5173/?? ??? ? ????.

React Router? ???? SPA ??
?? ?? Vite ???? ??? ??????? ?? ??(???)? ???? React Router? ???? ??? ???? SPA? ??? ?????.

1-React Router ??

React Router? React ??????? ??? ?? ?? ???? ? ??????. ?? ??? ???? ??????:

npm install react-router-dom

2-App.jsx? ??? ??

?, ??, ??? ? ??? ???? ?? ??? ????? App.jsx ??? ?????.

import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
}

export default App;

? ??? ???? ?? ?? ?? ???? ??? ?? ??? ??? ??? ? ???? SPA? ????? ???? ?????.

Vite ? React? ?? ???

Vite ??? ?? ?? ? ??? ?? ?????? ?? ??? ????? ????. SPA? ?? ???? ? ?? ? ?? ??? ??? ????.

1-?? ?? ?? ??

Vite? ?? ?? ? ?? ?? ??? ?? ??? ?? ?? ??? ??? ? ????. ??? ?? ?? ?? ?? ??? ?? ??? ? ????.

import { lazy, Suspense } from 'react';

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

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  );
}

2-? ?? ??(HMR)

Vite? ??? HMR(? ?? ??)? ???? ??? ??????? ? ??? ??? ? ????. Vite? ?? ???? ?? ???? ?? ??? ??? ??????? ?? ??? ?????.

3-?? ??

Vite? ?? ??? ?? ?? ??? ?????, ?? ?? ??? ???? ??? ???? ? ? ?????. ???? ??? .env ??? ????? ?? ???.

SPA?? SEO ????

SPA? ???? ?? ? ??? ?? ??? ?? ???? ????? ? ?? ???? ?? ??? SEO ??? ?? ??? ????. ??? Next.js ?? React ??? ?? ??? ???? ?? ??? ???? ???? SEO? ???? ? ??? ??? ? ????.

?? ??? ?? ?? ???? ?? Next.js? ?? ?????? ???? ?? ? ???(SSR) ?? ?? ??? ??(SSG)? ??? ? ????.

Conclusion
By leveraging Vite’s powerful bundling capabilities and React’s component-based architecture, you can build highly performant Single Page Applications with ease. Vite offers faster build times, better hot reloads, and superior performance, making it an ideal choice for modern web development.

If you're looking to develop or optimize a Single Page Application for your business or personal project, I offer professional web development services specializing in React and Next.js. Whether it's building a brand new SPA from scratch or improving the performance of your existing site, I'm here to help.

Contact me via email at [SeyedAhmadDev@gmail.com] or WhatsApp [ 989034260454] to discuss your project needs.

The above is the detailed content of How to Build a Faster Single Page Application (SPA) Using Vite and React. For more information, please follow other related articles on the PHP Chinese website!