React基于路由的代码分割技术详解

更新时间：2022年12月23日 16:49:05 作者：黎燃

这篇文章主要为大家介绍了React基于路由的代码分割技术详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

代码分割

// app.js
import { add } from './math.js';
console.log(add(16, 26)); // 42

大多数React应用程序将使用Webpack、Rollup或Browserify等构建工具来打包文件。打包是将文件引入并合并到单个文件中，最后形成一个“包”的过程。然后在页面上引入捆绑包，整个应用程序可以一次加载

function add(a, b) {
  return a + b;
}
console.log(add(16, 26)); // 42

小心： 最后，包文件将与上面的示例非常不同。如果使用的是Create React App、Next Js、Gatsby或类似工具，将拥有一个可直接用于打包的Webpack配置。如果不使用这些工具，则需要自己配置它们。例如，查看Webpack文档中的安装和入门教程。

分割

打包是一项伟大的技术，但随着应用程序的增长，代码包也会随之增长。尤其是在集成大型第三方库的情况下。需要注意代码包中包含的代码，以避免由于容量过大而导致加载时间过长。为了避免创建大型代码包，在早期阶段考虑这个问题并划分代码包是一个不错的选择。代码分区是Webpack、Rollup和Browserify（factor bundle）等打包程序支持的技术，它可以创建多个包并在运行时动态加载它们。应用程序的代码分段可以帮助“懒惰地加载”当前用户所需的内容，并可以显著提高应用程序的性能。虽然它不会减少应用程序的总代码量，但可以避免加载用户永远不需要的代码，并减少在初始加载时需要加载的代码量。

import { add } from './math';
console.log(add(16, 26));

import("./math").then(math => {
  console.log(math.add(16, 26));
});

当Webpack解析此语法时，它将自动拆分代码。如果使用CreateReact应用程序，则该功能已被开箱即用，可以立即使用该功能。下一个Js在没有配置的情况下也支持此功能。如果自己配置Webpack，可能需要阅读Webpack的代码拆分指南。的Webpack配置应该与此类似。当使用Babel时，应该确保Babel能够解析动态导入语法，而不是转换它。对于这个需求，需要babel插件语法导入插件。

import React, { Suspense } from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

当组件首次呈现时，此代码将自动导入包含OtherComponent组件的包。反应Lazy接受需要动态调用import（）的函数。它必须返回一个promise，这需要解析dealout导出的React组件。然后，应该在Suspense组件中呈现懒惰组件，以便我们可以在等待加载懒惰组件时使用优雅的降级（如加载指示符）。

import React, { Suspense } from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

回退属性接受在加载组件期间要显示的任何React元素。可以将Suspend组件放置在延迟加载组件上方的任何位置。甚至可以用一个Suspend组件包装多个延迟加载组件。

import React, { Suspense } from 'react';
import MyErrorBoundary from './MyErrorBoundary';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
const MyComponent = () => (
  <div>
    <MyErrorBoundary>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </MyErrorBoundary>
  </div>
);

基于路由的代码分割

决定在哪里引入代码分段需要一些技巧。需要确保所选位置可以均匀地拆分代码包，而不会影响用户体验。一个好的选择是从路由开始。大多数web用户习惯于在页面之间进行加载和切换过程。还可以选择重新渲染整个页面，这样用户在渲染时就不必与页面上的其他元素交互。以下是如何在应用程序中使用React的示例。第三方库（如lazy和React Router）用于配置基于路由的代码拆分。

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));
const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </Suspense>
  </Router>
);

反应Lazy当前仅支持默认导出。如果要导入的模块使用命名导出，则可以创建一个中间模块作为默认模块重新导出。这确保了树抖动不会出错，并且不会引入不必要的组件。反应Lazy和Suspend技术尚不支持服务器端渲染。如果想在使用服务器端渲染的应用程序中使用它，我们建议使用可加载组件。它有一个很棒的服务器端渲染和打包指南。

以上就是React基于路由的代码分割技术详解的详细内容，更多关于React基于路由代码分割的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

React 状态的不变性实例详解
这篇文章主要为大家介绍了React 状态的不变性实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
React Native模块之Permissions权限申请的实例相机
这篇文章主要介绍了React Native模块之Permissions权限申请的实例相机的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下
2017-09-09
React进行路由变化监听的解决方案
在现代单页应用（SPA）中,路由管理是至关重要的一部分,它不仅决定了用户如何在页面间切换,还直接影响到整个应用的性能和用户体验,这些看似不起眼的问题,往往会导致功能错乱和性能下降,本篇文章将深入探讨在 React 中如何高效监听路由变化,需要的朋友可以参考下
2025-01-01
解决react中useState状态异步更新的问题
本文主要介绍了react中useState状态异步更新的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07
react map使用方法实例详解
map()方法是在React中常用的数组处理方法之一,可以用于遍历数组、生成组件列表以及进行数据转换等操作,通过合理运用map()方法,可以更灵活地处理和展示数据,下面给大家讲解react map使用方法,感兴趣的朋友一起看看吧
2023-10-10
解决React报错You provided a `checked` prop&n
这篇文章主要为大家介绍了React报错You provided a `checked` prop to a form field的解决方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
在 React 项目中全量使用 Hooks的方法
这篇文章主要介绍了在 React 项目中全量使用 Hooks,使用 Hooks 能为开发提升不少效率，但并不代表就要抛弃 Class Component，依旧还有很多场景我们还得用到它，本文给大家介绍的非常详细，需要的朋友可以参考下
2022-10-10
React模仿网易云音乐实现一个音乐项目详解流程
这篇文章主要介绍了React模仿网易云音乐实现一个音乐项目的详细流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
Unity RectTransform详解
unity中的ui元素是有严格的父子关系的,子物体的位置是根据父物体的变化而变化的,而子物体和父物体联系的桥梁就是Anchor,本文重点介绍Unity RectTransform的相关知识,感兴趣的朋友一起看看吧
2024-01-01
详解在React项目中安装并使用Less（用法总结）
这篇文章主要介绍了详解在React项目中安装并使用Less（用法总结），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03

React基于路由的代码分割技术详解

目录

代码分割

分割

基于路由的代码分割

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具