随着 react 应用程序的大小和复杂性不断增长，其 javascript 包的大小会显着影响性能，尤其是在较慢的网络或设备上。缓解此问题的一种有效方法是通过代码拆分，这是一种将应用程序分解为更小的块的技术。这些块按需加载，减少了初始加载时间并提高了整体性能。
在本文中，我们将探讨什么是代码分割、为什么它很重要，以及如何在 react 应用程序中有效地实现它。
什么是代码分割？
代码分割是一种用于将 javascript 代码分割成更小的包的策略，这些包可以在需要时动态加载。代码分割允许您仅发送用户交互立即需要的代码部分，而不是向浏览器提供一个大型 javascript 文件。这减少了应用程序的初始加载时间。
react 使用动态导入和 webpack 等工具来实现代码分割。
代码拆分的好处
减少初始加载时间：仅预先加载关键代码。提高性能：较小的捆绑包加载速度更快，尤其是在慢速网络上。高效的资源使用：根据需要加载资源，最大限度地减少未使用的代码。更好的用户体验：用户体验与您的应用更快的交互。在 react 中实现代码分割
1。使用 react 的 react.lazy 和 suspense
react 提供了 react.lazy 来延迟加载组件，并提供 suspense 来在获取延迟加载的组件时显示后备 ui。
这是一个例子：
第 1 步：延迟加载组件
import react, { suspense } from 'react';// lazy load the componentconst lazyloadedcomponent = react.lazy(() => import('./lazyloadedcomponent'));function app() { return ( react code splitting example
<suspense fallback={loading...}> );}export default app;
登录后复制
说明：
react.lazy(() => import(‘./lazyloadedcomponent’))：仅在需要时动态导入组件。<suspense fallback="{
2。按路由分割代码
对于较大的应用程序，按路由拆分代码是提高性能的最有效方法之一。像 react router 这样的库使这个过程变得无缝。
第 1 步：安装 react router
npm install react-router-dom
登录后复制
第 2 步：使用路由实现代码分割
import react, { suspense } from 'react';import { browserrouter as router, route, switch } from 'react-router-dom';// lazy load components for routesconst home = react.lazy(() => import('./home'));const about = react.lazy(() => import('./about'));const contact = react.lazy(() => import('./contact'));function app() { return ( <suspense fallback={loading...}> );}export default app;
登录后复制
好处：
仅加载活动路由的 javascript。减小初始包的大小。
3。使用 webpack 的动态导入
如果您使用 webpack 作为模块打包器，它支持开箱即用的动态导入。 webpack 将代码分割成可以动态加载的块。
以下是如何在 react 应用程序中使用它：
示例：
function loadcomponent() { import('./heavycomponent') .then((module) => { const component = module.default; // use the component here }) .catch((error) => { console.error('error loading the component:', error); });}
登录后复制
工作原理：
webpack 为 heavycomponent 创建一个单独的块。仅当调用 loadcomponent() 时才会加载该块。
4。使用 webpack 包分析器分析您的包
在实施代码分割之前，必须了解是什么影响了包的大小。 webpack 提供了一个名为 bundle analyzer 的工具来可视化包的内容。
第 1 步：安装 webpack 捆绑分析器
npm install --save-dev webpack-bundle-analyzer
登录后复制
第 2 步：配置 webpack
将插件添加到您的 webpack 配置中：
const { bundleanalyzerplugin } = require('webpack-bundle-analyzer');module.exports = { plugins: [ new bundleanalyzerplugin(), ],};
登录后复制
第 3 步：分析您的捆绑包
运行构建命令来生成报告：
npm run build
登录后复制
分析器将显示一个树状图，显示每个模块的大小，帮助您识别优化机会。
5。使用第三方库进行代码分割
大型第三方库（例如 lodash、moment.js）可能会使您的包大小膨胀。您可以将这些库拆分为单独的块，或使用 tree-shaking 删除库中未使用的部分。
示例：库的动态导入
import('lodash') .then((_) => { const uniq = _.uniq([1, 2, 2, 3]); console.log(uniq); }) .catch((error) => { console.error('error loading lodash:', error); });
登录后复制
摇树示例：
而不是导入整个库：
import { uniq } from 'lodash';
登录后复制
代码分割的最佳实践
从基于路由的拆分开始：这是减少初始加载时间的最简单、最有效的方法。避免过度分割：太多的块会导致过多的 http 请求。将代码分割与延迟加载相结合：仅加载当前用户交互所需的内容。监控性能：使用 lighthouse 等工具来衡量实施代码分割后的改进。使用现代构建工具：webpack、vite 和 parcel 等工具提供对代码分割的内置支持。
结论
代码分割是一种强大的优化技术，可以极大地提高 react 应用程序的性能。通过将您的应用程序分成更小的块并按需加载它们，您可以减少初始加载时间，改善用户体验，并使您的应用程序更加高效。
从基于路由的拆分开始，然后尝试组件级或库级拆分，以根据您的应用需求进行优化。将代码分割与其他性能技术（例如延迟加载和树摇动）相结合，以最大限度地提高 react 应用程序的效率。
以上就是如何通过代码分割提高 React 应用程序的性能的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2645533.html
