前端代码分割与懒加载技术实践 | 极客日志

JavaScript大前端

前端代码分割与懒加载技术实践

前端代码分割与懒加载的重要性及实现方法。通过减少初始加载时间、优化资源利用和提高首屏渲染速度，能显著提升大型应用性能。主要方案包括使用 React.lazy 配合 Suspense 进行组件级懒加载，配置 Webpack 的 splitChunks 进行分包，以及基于路由或条件触发懒加载。同时提醒开发者需权衡利弊，避免过度分割导致网络请求增加，应根据实际场景选择合适的策略以提升用户体验。

莫名其妙发布于 2026/4/5更新于 2026/4/131 浏览

前端代码分割与懒加载：让你的应用飞起来

毒舌时刻

代码分割和懒加载？听起来就像是前端工程师为了掩饰自己代码写得太烂而发明的借口。你写的代码那么大，加载时间那么长，不分割能行吗？

你以为随便分割一下代码就能解决性能问题？别做梦了！如果分割策略不合理，反而会导致更多的网络请求，让应用变得更慢。

为什么你需要这个

减少初始加载时间：通过代码分割，只加载当前页面所需的代码，减少初始加载时间，提高用户体验。
优化资源利用：只加载用户需要的代码，避免加载不必要的资源，优化内存和带宽使用。
提高首屏渲染速度：快速加载首屏所需的代码，让用户尽快看到页面内容。
支持大型应用：对于大型应用，代码分割可以避免打包后的文件过大，导致加载时间过长。

反面教材

// 这是一个典型的不使用代码分割的应用
import React from 'react';
import ReactDOM from 'react-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
import Dashboard from './pages/Dashboard';
import Settings from './pages/Settings';
import UserProfile from './pages/UserProfile';
import AdminPanel from './pages/AdminPanel';
import { BrowserRouter  , ,  }  ;

 () {
   (
    
  );
}
.(, .());

极客日志微信公众号二维码

更多推荐文章

相关免费在线工具

Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online

// 使用 React.lazy 和 Suspense 实现懒加载
import React, { lazy, Suspense } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

// 懒加载页面组件
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Contact = lazy(() => import('./pages/Contact'));
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));
const UserProfile = lazy(() => import('./pages/UserProfile'));
const AdminPanel = lazy(() => import('./pages/AdminPanel'));

// 加载中组件
const Loading = () => <div>Loading...</div>;

function App() {
  return (
    <Router>
      <Suspense fallback={<Loading />}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/settings" element={<Settings />} />
          <Route path="/user-profile" element={<UserProfile />} />
          <Route path="/admin" element={<AdminPanel />} />
        </Routes>
      </Suspense>
    
  );
}
ReactDOM.render(<App />, document.getElementById('root'));

// webpack.config.js
module.exports = {
  entry: {
    main: './src/index.js',
  },
  output: {
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].chunk.js',
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\/]node_modules[\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
};

// 使用 React Router 和 React.lazy 实现基于路由的代码分割
import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';

// 懒加载路由组件
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Contact = lazy(() => import('./pages/Contact'));
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));
const UserProfile = lazy(() => import('./pages/UserProfile'));
const AdminPanel = lazy(() => import('./pages/AdminPanel'));

// 加载中组件
const Loading = () => (
  <div className="loading">
    <div className="loading-spinner"></div>
    <p>Loading...</p>
  </div>
);

// 错误边界组件
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  componentDidCatch(error, errorInfo) {
    console.error('Error:', error);
    console.error('Error Info:', errorInfo);
  }
  render() {
    if (this.state.hasError) {
      return <div>Something went wrong. Please try again later.</div>;
    }
    return this.props.children;
  }
}

function App() {
  return (
    <Router>
      <ErrorBoundary>
        <Suspense fallback={<Loading />}>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/contact" element={<Contact />} />
            <Route path="/dashboard" element={<Dashboard />} />
            <Route path="/settings" element={<Settings />} />
            <Route path="/user-profile" element={<UserProfile />} />
            <Route path="/admin" element={<AdminPanel />} />
            <Route = =< =  />} />
          
        
      
    
  );
}
export default App;

// 基于条件懒加载组件
import React, { lazy, Suspense, useState } from 'react';

// 懒加载重型组件
const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  const [showHeavyComponent, setShowHeavyComponent] = useState(false);
  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={() => setShowHeavyComponent(true)}>Load Heavy Component</button>
      {showHeavyComponent && (
        <Suspense fallback={<div>Loading heavy component...</div>}>
          <HeavyComponent />
        </Suspense>
      )}
    </div>
  );
}
export default App;