前端懒加载技术全面解析

懒加载（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