React 中实现代码分割的方法与实践指南

import React, { lazy, Suspense } 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 App = () => {
    return (
        <Router>
            <Suspense fallback={<div>Loading...</div>}>
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="/about" element={<About />} />
                </Routes>
            </Suspense>
        </Router>
    );
};
export default App;

import React, { lazy, Suspense } from'react';
// 动态导入组件
const LargeComponent = lazy(() => import('./components/LargeComponent'));
const App = () => {
    return (
        <div>
            <Suspense fallback={<div>Loading component...</div>}>
                <LargeComponent />
            </Suspense>
        </div>
    );
};
export default App;

import React, { lazy, Suspense } from'react';
const LargeComponent = lazy(() => import('./components/LargeComponent'));
class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }
    componentDidCatch(error, errorInfo) {
        this.setState({ hasError: true });
    }
    render() {
        if (this.state.hasError) {
            return <div>Something went wrong.</div>;
        }
        return this.props.children;
    }
}
const App = () => {
    return (
        <div>
            <ErrorBoundary>
                <Suspense fallback={<div>Loading component...</div>}>
                    <LargeComponent />
                </Suspense>
            </ErrorBoundary>
        </div>
    );
};
export default App;