在 React 项目中实现延迟加载和代码分割的分步指南

百变鹏仔 3天前 #JavaScript

文章标签加载

这是在 react 项目中实现延迟加载和代码分割的分步指南。我们将创建一个具有两个路由的简单应用程序，延迟加载组件。

第 1 步：创建一个新的 react 应用程序

如果您还没有创建一个新的 react 应用程序，请使用 create react app 创建一个新的 react 应用程序：

npx create-react-app lazy-loading-examplecd lazy-loading-example

第2步：安装react router

安装react-router-dom用于路由：

npm install react-router-dom

第 3 步：设置延迟加载和代码分割

创建组件

在 src 目录中创建一个名为 components 的文件夹。
在组件内部，创建两个文件：home.js 和 about.js。

home.js

import react from 'react';const home = () =&gt; {  return <h2>home page</h2>;};export default home;

关于.js

import react from 'react';const about = () =&gt; {  return <h2>about page</h2>;};export default about;

更新app.js

现在，修改您的 app.js 文件以实现延迟加载和路由：

import react, { suspense } from 'react';import { browserrouter as router, route, switch, link } from 'react-router-dom';// lazy load componentsconst home = react.lazy(() =&gt; import('./components/home'));const about = react.lazy(() =&gt; import('./components/about'));function app() {  return (    <router><nav><ul><li>            <link to="/">home          </li>          <li>            <link to="/about">about          </li>        </ul></nav><suspense fallback="{&lt;div">loading...}&gt;        <switch><route path="/about" component="{about}"></route><route path="/" component="{home}"></route></switch></suspense></router>  );}export default app;

第 4 步：运行您的应用程序

现在，运行您的应用程序以查看其实际效果：

npm start

第 5 步：测试延迟加载

打开浏览器并导航至 http://localhost:3000。
点击“home”链接即可查看 home 组件加载。
点击“about”链接即可看到about组件延迟加载。

要点

额外的增强功能

您可以通过以下方式进一步增强您的设置：

如果您需要更多具体功能或其他帮助，请告诉我！

文章推荐

在 React 项目中实现延迟加载和代码分割的分步指南

第 1 步：创建一个新的 react 应用程序

第2步：安装react router

第 3 步：设置延迟加载和代码分割

创建组件

更新app.js

第 4 步：运行您的应用程序

第 5 步：测试延迟加载

要点

额外的增强功能

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？