【React高级技术】代码分割技术在React的高级使用[基于路由的代码分割]

简介: 【React高级技术】代码分割技术在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技术尚不支持服务器端渲染。如果想在使用服务器端渲染的应用程序中使用它,我们建议使用可加载组件。它有一个很棒的服务器端渲染和打包指南。

相关文章
|
2月前
|
前端开发 JavaScript
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
本文介绍了在React项目中实现路由懒加载的方法,使用React提供的`lazy`和`Suspense`来优化项目首次加载的速度。通过将路由组件改为懒加载的方式,可以显著减少初始包的大小,从而加快首次加载速度。文章还展示了如何使用`Suspense`组件包裹`Switch`来实现懒加载过程中的fallback效果,并提供了使用前后的加载时间对比,说明了懒加载对性能的提升作用。
110 2
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
|
19天前
|
人工智能 自然语言处理 前端开发
SpringBoot + 通义千问 + 自定义React组件:支持EventStream数据解析的技术实践
【10月更文挑战第7天】在现代Web开发中,集成多种技术栈以实现复杂的功能需求已成为常态。本文将详细介绍如何使用SpringBoot作为后端框架,结合阿里巴巴的通义千问(一个强大的自然语言处理服务),并通过自定义React组件来支持服务器发送事件(SSE, Server-Sent Events)的EventStream数据解析。这一组合不仅能够实现高效的实时通信,还能利用AI技术提升用户体验。
98 2
|
27天前
|
Rust 前端开发 JavaScript
前端技术新探索:从React到WebAssembly的高效之路
前端技术新探索:从React到WebAssembly的高效之路
68 1
|
14天前
|
资源调度 前端开发 测试技术
React Router 路由管理
【10月更文挑战第10天】本文介绍了 React Router,一个在 React 应用中管理路由的强大工具。内容涵盖基本概念、安装与使用方法、常见问题及解决方案,如路由嵌套、动态路由和路由守卫等,并提供代码示例。通过学习本文,开发者可以更高效地使用 React Router,提升应用的导航体验和安全性。
102 19
|
15天前
|
前端开发 网络架构
React 路由
10月更文挑战第11天
25 2
|
16天前
|
前端开发 JavaScript 开发者
探索现代Web前端技术:React框架入门
【10月更文挑战第9天】 探索现代Web前端技术:React框架入门
|
25天前
|
前端开发 数据安全/隐私保护
前端技术实战:React Hooks 实现表单验证
【10月更文挑战第1天】前端技术实战:React Hooks 实现表单验证
|
25天前
|
前端开发 JavaScript 网络架构
实现动态路由与状态管理的SPA——使用React Router与Redux
【10月更文挑战第1天】实现动态路由与状态管理的SPA——使用React Router与Redux
27 1
|
2月前
|
前端开发 JavaScript 区块链
react18函数组件+antd使用指南-使用代码集合以及报错记录汇总
本文介绍了多个React开发中常见的问题及其解决方案,包括但不限于:1)`useForm`实例未连接到任何`Form`元素的警告及解决方法;2)监听页面滚动事件的实现方式;3)React 18与antd 5.8.6中定制主题的方法;4)React结合antd 4.x版本自定义主题色的步骤;5)解决`ResizeObserver loop`相关报错的技巧;6)处理React设计表单时遇到的CDN资源加载失败问题;7)解决onClick事件传参问题;8)修复类型错误等。每部分均提供详细分析与实用代码示例,帮助开发者快速定位并解决问题。
34 2
|
2月前
|
前端开发 Python
React技术栈-React路由插件之自定义组件标签
关于React技术栈中React路由插件自定义组件标签的教程。
48 4
React技术栈-React路由插件之自定义组件标签