前端懒加载技术全面解析 - 详解

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