React 16 + Webpack 3：构建前端单页应用（SPA）的基础框架

2023-09-10 09:17:06

React 16 和 Webpack 3 是构建现代前端应用程序的强大工具。React 16 提供了出色的组件化开发体验，而 Webpack 3 则可以高效地管理和构建应用程序的资源。

在这篇教程中，我们将结合这两个工具，一步一步地构建一个 React SPA 的基础框架。我们将使用 React-Router 来管理应用程序的路由，并探索四种不同的异步加载方式来优化应用程序的性能。

准备工作

首先，我们需要安装必要的工具和库。

npm install -g create-react-app
npm install -g webpack
npm install -g webpack-dev-server

然后，创建一个新的 React 项目。

create-react-app my-app

搭建基础框架

进入项目目录，安装必要的依赖项。

cd my-app
npm install --save react-router-dom

接下来，在 src 目录下创建必要的组件和页面。

mkdir components
mkdir pages

在 components 目录下创建一个 Header 组件。

// components/Header.js

import React from 'react';

const Header = () => {
  return (
    <header>
      <h1>My App</h1>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
    </header>
  );
};

export default Header;

在 pages 目录下创建 Home 和 About 页面。

// pages/Home.js

import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Home</h1>
      <p>This is the home page.</p>
    </div>
  );
};

export default Home;


// pages/About.js

import React from 'react';

const About = () => {
  return (
    <div>
      <h1>About</h1>
      <p>This is the about page.</p>
    </div>
  );
};

export default About;

在 src 目录下创建 index.js 文件，作为应用程序的入口。

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import Header from './components/Header';
import Home from './pages/Home';
import About from './pages/About';

const App = () => {
  return (
    <Router>
      <div>
        <Header />

        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

异步加载

为了优化应用程序的性能，我们可以使用 React-Router 的异步加载功能。React-Router 提供了四种不同的异步加载方式：

代码拆分（Code Splitting）： 将应用程序的代码拆分成多个独立的包，并在需要时加载。
按需加载（Lazy Loading）： 仅在需要时加载组件，而不是在应用程序启动时加载所有组件。
预加载（Prefetching）： 在应用程序启动时预加载组件，以便在需要时快速加载。
预渲染（Pre-Rendering）： 在服务器端渲染应用程序的页面，以便在加载时立即显示。

代码拆分

代码拆分是将应用程序的代码拆分成多个独立的包，并在需要时加载。这可以减少应用程序的初始加载时间，并提高应用程序的性能。

在 React 中，可以使用 dynamic import() 语法来实现代码拆分。

// pages/Home.js

import React, { Suspense } from 'react';

const Home = () => {
  return (
    <div>
      <h1>Home</h1>
      <p>This is the home page.</p>

      <Suspense fallback={<div>Loading...</div>}>
        <About />
      </Suspense>
    </div>
  );
};

export default Home;


// pages/About.js

const About = React.lazy(() => import('./About'));

按需加载

按需加载是仅在需要时加载组件，而不是在应用程序启动时加载所有组件。这可以减少应用程序的初始加载时间，并提高应用程序的性能。

在 React 中，可以使用 React.lazy() 函数来实现按需加载。

// pages/Home.js

import React, { Suspense } from 'react';

const Home = () => {
  return (
    <div>
      <h1>Home</h1>
      <p>This is the home page.</p>

      <Suspense fallback={<div>Loading...</div>}>
        <About />
      </Suspense>
    </div>
  );
};

export default Home;


// pages/About.js

const About = React.lazy(() => import('./About'));

预加载

预加载是在应用程序启动时预加载组件，以便在需要时快速加载。这可以减少组件的加载时间，并提高应用程序的性能。

在 React 中，可以使用 webpackPrefetch 插件来实现预加载。

// webpack.config.js

module.exports = {
  plugins: [
    new webpackPrefetchPlugin('About', 'react-loadable/webpack')
  ]
};

预渲染

预渲染是在服务器端渲染应用程序的页面，以便在加载时立即显示。这可以提高应用程序的首次加载速度，并改善用户体验。

在 React 中，可以使用 react-dom/server 模块来实现预渲染。

// server.js

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  const html = renderToString(<App />);

  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        
      </head>
      <body>
        <div id="root">${html}</div>
        <script src="/bundle.js"></script>
      </body>
    </html>
  `);
});

app.listen(3000);