懶加載（Lazy Loading）是一種優化前端性能的重要技術，核心思想是延遲加載非關鍵資源，只在需要時加載它們。

一、懶加載的基本原理

懶加載的核心思想是通過以下方式優化性能：

• 減少初始加載實踐： 只加載首屏所需資源
• 節省帶寬和內存： 避免加載用戶可能不會查看的內容
• 提高用戶體驗： 更快的首屏渲染，平滑的后續加載

二、路由懶加載（代碼分割）

路由懶加載是將SPA（單頁應用）拆分成多個代碼塊，按需加載的技術。
React 實現方式

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';// 使用React.lazy動態導入組件
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Contact = lazy(() => import('./pages/Contact'));function App() {return (<Router>{/* Suspense提供加載狀態 */}<Suspense fallback={<div className='loader'>Loading...</div>}<Routes><Route path='/' element={<Home />} /><Route paht='/about' element={<About />} /><Route path='contact' element={<Contact />} /></Routes></Router>);
}export default App;

Vue 實現方式

// router.js
import { createRouter, createWebHistory } from 'vue-router';const routes = [{path: '/',name: 'Home',component: () => import('../views/Home.vue')},{path: '/about',name: 'About',component: () => import('../views/About.vue')}
];const router = createRouter({history: createWebHistory(),routes
});export default router