前端代码分割与懒加载实战指南

这里要注意，Suspense 的 fallback 属性决定了加载期间的 UI 表现。如果没有这个包裹，路由切换时可能会闪烁或报错。

完善错误处理

懒加载过程中可能会出现网络错误或模块解析失败，这时候需要一个错误边界来兜底。

import React, { lazy, Suspense, useState } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

// 错误边界组件
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() {
  const [showHeavyComponent, setShowHeavyComponent] = useState(false);

  return (
    <Router>
      <ErrorBoundary>
        <Suspense fallback={<div>Loading...</div>}>
          <Routes>
            <Route path="/" element={<Navigate to="/home" replace />} />
            <Route path="/home" element={
              <div>
                <h1>Home Page</h1>
                <button onClick={() => setShowHeavyComponent(true)}>
                  Load Heavy Component
                </button>
                {showHeavyComponent && <HeavyComponent />}
              </div>
            } />
          </Routes>
        </Suspense>
      </ErrorBoundary>
    </Router>
  );
}

export default App;

Webpack 配置优化

除了框架层面的支持，构建工具的配置同样关键。Webpack 的 splitChunks 插件可以自动提取公共代码。

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',
        },
      },
    },
  },
};

这样配置后，node_modules 里的依赖会被单独打包成一个文件，利用浏览器缓存机制，当依赖更新频率低时能显著提升加载速度。

总结

代码分割的核心目的是提升性能和体验，而不是炫技。在实际开发中，建议先分析打包体积，针对大模块进行拆分。同时注意错误处理和加载状态的反馈，避免给用户带来卡顿感。把握好度，才能在复杂度和性能之间找到最佳平衡点。