前端懒加载技术全面解析

最新推荐文章于 2025-08-12 21:09:19 发布

原创

最新推荐文章于 2025-08-12 21:09:19 发布 · 776 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

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

最低0.47元/天解锁文章