首页 web前端 js教程 快速优化您的 ReactJS 应用程序的性能和大小

快速优化您的 ReactJS 应用程序的性能和大小

Dec 10, 2024 pm 08:13 PM

React 被大量用于前端密集型应用程序,具有其独特的性能和尺寸优化方式。改进两者将对 React 包大小产生相当大的可衡量的影响。考虑到我们专注于客户端渲染的应用程序,包大小越小,加载时间越快。

服务器端渲染将进一步缩短加载时间。在服务器端渲染中,当用户请求网页时,React 组件将在服务器本身中渲染为 HTML 代码。然后这个预渲染的页面被发送到浏览器,让用户立即看到页面,而无需 JS 加载时间的开销。

但这完全是一个不同的故事。让我们主要关注通过在代码中进行调整来改善包包大小来尝试改进客户端呈现的站点。让我们深入探讨一下。

1. 代码分割和动态导入

React 代码的“捆绑”是跟踪所有导入和代码并将其组合成一个名为“Bundle”的单个文件的过程。 Webpack、Browserify 等已经为我们做到了这一点。

Webpack 有一个名为“代码分割”的功能,负责将单个包分割成更小的块,对块进行重复数据删除,并“按需”导入它们。这会显着影响应用程序的加载时间。

module.exports = {
  // Other webpack configuration options...
  optimization: {
    splitChunks: {
      chunks: 'all', // Options: 'initial', 'async', 'all'
      minSize: 10000, // Minimum size, in bytes, for a chunk to be generated
      maxSize: 0, // Maximum size, in bytes, for a chunk to be generated
      minChunks: 1, // Minimum number of chunks that must share a module before splitting
      maxAsyncRequests: 30, // Maximum number of parallel requests when on-demand loading
      maxInitialRequests: 30, // Maximum number of parallel requests at an entry point
      automaticNameDelimiter: '~', // Delimiter for generated names
      cacheGroups: {
        defaultVendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};
登录后复制
登录后复制
登录后复制

使用 React Suspense 延迟加载组件 (React 18):与动态导入相结合将显示组件加载时间的明显改进。

通常,当我们在父组件中导入子组件时,我们是静态导入的。为了防止在我们实际必须渲染它之前导入该组件,我们可以将动态导入与 React Suspense 结合使用。 React Suspense 可以按需加载组件。它显示了 Fallback UI,同时动态导入然后渲染相应的组件。

import { lazy } from 'react';

// The lazy loaded Component has to be exported as default
const BlogSection = lazy(() => import('./BlogSection.tsx'));

export default function HomePage() {
  return (
    <>
      <Suspense fallback={<Loading />}>
        <BlogSection />
      </Suspense>
    </>
  );
}

function Loading() {
  return <h2>Component is Loading...</h2>;
}
登录后复制
登录后复制

2. 摇树

这是 JavaScript 捆绑程序使用的一种技术,用于在创建捆绑包之前删除所有未使用的代码。 ES6代码可以进行tree-shaking;但是,基于 CommonJS 的代码(即使用“require”)不能进行 tree-shaken。

Webpack Bundle Analyzer 是一个插件,可帮助您通过交互式地图可视化 Webpack 的大小。

npm install --save-dev webpack-bundle-analyzer
npm install -g source-map-explorer
登录后复制

然后配置您的 webpack 以将上述内容添加为插件:

plugins: [
  new BundleAnalyzerPlugin(),
  new HtmlWebpackPlugin({
    template: './public/index.html', // Path to your HTML template
    filename: 'index.html', // Output HTML file name
    inject: true, // Inject all assets into the body
  }),
];
登录后复制

确保您的脚本配置为运行 Webpack:

"build": "webpack --config webpack.config.js --mode production"
登录后复制

运行yarn build来生成report.html,它将帮助您有效地可视化您的包大小。

它看起来像这样:

Quick Optimization for your ReactJS Application for Performance and Size

3. 并发渲染

让我们首先了解什么是阻塞渲染。阻塞渲染是指主线程(UX 更新)被阻塞,因为 React 在后台执行一些不太重要的任务。 React 16 之前都是这种情况。

React 18 引入了并发功能,这意味着它将:

  • 让您更好地控制后台更新的安排方式,并通过不阻塞主线程来创建流畅的最终用户体验。
  • 启动状态更新的自动批处理:批处理是指将由于多次状态更新而导致的多次重新渲染进行分组,使得状态只更新一次。

使用 startTransition() 钩子将 React 更新视为非紧急更新,帮助 React 优先考虑紧急更新,例如用户输入和用户与组件的交互。

module.exports = {
  // Other webpack configuration options...
  optimization: {
    splitChunks: {
      chunks: 'all', // Options: 'initial', 'async', 'all'
      minSize: 10000, // Minimum size, in bytes, for a chunk to be generated
      maxSize: 0, // Maximum size, in bytes, for a chunk to be generated
      minChunks: 1, // Minimum number of chunks that must share a module before splitting
      maxAsyncRequests: 30, // Maximum number of parallel requests when on-demand loading
      maxInitialRequests: 30, // Maximum number of parallel requests at an entry point
      automaticNameDelimiter: '~', // Delimiter for generated names
      cacheGroups: {
        defaultVendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};
登录后复制
登录后复制
登录后复制

在这个例子中,当输入值改变时,handleChange函数被调用。 startTransition 函数用于将对列表状态的更新标记为非紧急。这允许 React 优先更新值状态,确保即使列表很大时输入也能保持响应。

使用 useDeferredValue 钩子推迟一个值(通常是昂贵的计算),直到 UI 不那么繁忙。

import { lazy } from 'react';

// The lazy loaded Component has to be exported as default
const BlogSection = lazy(() => import('./BlogSection.tsx'));

export default function HomePage() {
  return (
    <>
      <Suspense fallback={<Loading />}>
        <BlogSection />
      </Suspense>
    </>
  );
}

function Loading() {
  return <h2>Component is Loading...</h2>;
}
登录后复制
登录后复制

在此示例中,useDeferredValue 挂钩用于推迟值状态,直到 UI 不那么繁忙。这有助于通过将大列表的渲染推迟到处理输入更新之后来保持输入响应。

并发渲染的主要优点

  • 改进的响应能力:通过允许 React 中断渲染工作,UI 仍然可以响应用户交互。
  • 优先级:React 可以优先考虑紧急更新而不是非紧急更新,确保更流畅的用户体验。
  • 更好的性能:可以推迟昂贵的更新,减少对主线程的影响并提高应用程序的整体性能。

4.支持资源预加载(React 19)

如果您知道应用程序在加载过程中会获取任何大量资源,那么预加载资源是一个好主意。这些资源可以是字体、图像、样式表等

预加载有益的场景

  • 子组件将使用资源。在这种情况下,您可以在父组件的渲染阶段预加载它。
  • 在事件处理程序中预加载它,该事件处理程序会重定向到将使用此资源的页面/组件。事实上,这是比在渲染期间预加载更好的选择。
module.exports = {
  // Other webpack configuration options...
  optimization: {
    splitChunks: {
      chunks: 'all', // Options: 'initial', 'async', 'all'
      minSize: 10000, // Minimum size, in bytes, for a chunk to be generated
      maxSize: 0, // Maximum size, in bytes, for a chunk to be generated
      minChunks: 1, // Minimum number of chunks that must share a module before splitting
      maxAsyncRequests: 30, // Maximum number of parallel requests when on-demand loading
      maxInitialRequests: 30, // Maximum number of parallel requests at an entry point
      automaticNameDelimiter: '~', // Delimiter for generated names
      cacheGroups: {
        defaultVendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};
登录后复制
登录后复制
登录后复制

有趣的事实:实施预加载后,包括 Shopify、Financial Times 和 Treebo 在内的许多网站都发现以用户为中心的指标(例如交互时间和用户感知延迟)提高了 1 秒。


Quick Optimization for your ReactJS Application for Performance and Size

请留下反馈

我希望您觉得这个博客有帮助!您的反馈对我来说非常宝贵 ,所以请在下面的评论中留下您的想法和建议。

请随时在 LinkedIn 上与我联系以获取更多见解和更新。让我们保持联系,继续共同学习和成长!

以上是快速优化您的 ReactJS 应用程序的性能和大小的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1666
14
CakePHP 教程
1425
52
Laravel 教程
1328
25
PHP教程
1273
29
C# 教程
1253
24
JavaScript引擎:比较实施 JavaScript引擎:比较实施 Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时,效果会有所不同,因为每个引擎的实现原理和优化策略各有差异。1.词法分析:将源码转换为词法单元。2.语法分析:生成抽象语法树。3.优化和编译:通过JIT编译器生成机器码。4.执行:运行机器码。V8引擎通过即时编译和隐藏类优化,SpiderMonkey使用类型推断系统,导致在相同代码上的性能表现不同。

Python vs. JavaScript:学习曲线和易用性 Python vs. JavaScript:学习曲线和易用性 Apr 16, 2025 am 12:12 AM

Python更适合初学者,学习曲线平缓,语法简洁;JavaScript适合前端开发,学习曲线较陡,语法灵活。1.Python语法直观,适用于数据科学和后端开发。2.JavaScript灵活,广泛用于前端和服务器端编程。

从C/C到JavaScript:所有工作方式 从C/C到JavaScript:所有工作方式 Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1)C/C 是静态类型语言,需手动管理内存,而JavaScript是动态类型,垃圾回收自动处理。2)C/C 需编译成机器码,JavaScript则为解释型语言。3)JavaScript引入闭包、原型链和Promise等概念,增强了灵活性和异步编程能力。

JavaScript和Web:核心功能和用例 JavaScript和Web:核心功能和用例 Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互;2)在用户提交数据前进行客户端验证,提高用户体验;3)通过AJAX技术实现与服务器的无刷新通信。

JavaScript在行动中:现实世界中的示例和项目 JavaScript在行动中:现实世界中的示例和项目 Apr 19, 2025 am 12:13 AM

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用,涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

了解JavaScript引擎:实施详细信息 了解JavaScript引擎:实施详细信息 Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要,因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段;2)执行过程中,引擎会进行动态优化,如内联缓存和隐藏类;3)最佳实践包括避免全局变量、优化循环、使用const和let,以及避免过度使用闭包。

Python vs. JavaScript:社区,图书馆和资源 Python vs. JavaScript:社区,图书馆和资源 Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好,适合初学者,但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大,JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富,但Python适合从官方文档开始,JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

Python vs. JavaScript:开发环境和工具 Python vs. JavaScript:开发环境和工具 Apr 26, 2025 am 12:09 AM

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda,适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack,适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。

See all articles