当前位置：首页 > 文章列表 > 文章 > 前端 > 在 React 项目中实现延迟加载和代码分割的分步指南

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

来源：dev.to 2024-10-17 14:10:00 0浏览收藏

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《在 React 项目中实现延迟加载和代码分割的分步指南》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

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

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

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

npx create-react-app lazy-loading-example
cd 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 = () => {
  return home page;
};

export default home;

关于.js

import react from 'react';

const about = () => {
  return about page;
};

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 components
const home = react.lazy(() => import('./components/home'));
const about = react.lazy(() => import('./components/about'));

function app() {
  return (
    
      
        
          
            home
          
          
            about
          
        
      

      loading...

}> ); } export default app;