React 是一个用于构建动态用户界面的强大库，但随着应用程序的增长，可能会出现性能问题。在本指南中，我们将探讨优化 React Web 应用程序的关键步骤，以确保其平稳运行。
1、使用 React 的内置性能工具
React 提供了几个工具来帮助您识别和解决性能瓶颈：
-
React 开发者工具：
使用 Profiler 选项卡来测量组件的渲染情况，并识别不必要的渲染。
-
React 严格模式：
启用严格模式，以便在开发过程中捕获潜在的性能和编码问题。
提示：将您的应用程序包裹在 React.StrictMode 中，以显示有关低效模式的警告。
import Reactfrom'react';
importReactDOMfrom'react-dom/client';
importAppfrom'./App';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode><App /></React.StrictMode>
);2、优化组件渲染
不必要的重新渲染会极大地减慢您的应用程序速度。您可以通过以下方式优化组件渲染：
-
使用
React.memo：当函数组件的属性未更改时，防止其重新渲染。React 中父组件每次更新都会导致子组件重新渲染，即使子组件的状态没有发生变化。
为了减少重复渲染，我们可以使用 React.memo来缓存组件，这样只有在传入组件的状态值发生变化时才会从新渲染。如果传入的值相同，则会返回缓存的组件。
import React, { memo } from'react';const MyComponent = ({ data }) => {console.log('Rendering MyComponent');return <div>{data}</div>;
};export default memo(MyComponent);- 使用
useCallback和useMemo：
使用useCallback来记忆函数；
使用useMemo来记忆计算开销较大的操作。
import React, { useCallback, useMemo } from'react';constApp = ({ numbers }) => {
const calculateSum = useMemo(() => numbers.reduce((a, b) => a + b, 0), [numbers]);
const handleClick = useCallback(() =>console.log('Clicked!'), []);return (<div><h1>Sum: {calculateSum}</h1><button onClick={handleClick}>Click Me</button></div>);
};3、使用 React.lazy 进行代码拆分
使用 React.lazy 和 Suspense 将您的应用程序拆分为较小的包，以减少初始加载时间。
import React, { Suspense } from'react';constHeavyComponent = React.lazy(() =>import('./HeavyComponent'));constApp = () => {
return (<Suspense fallback={<div>Loading...</div>}><HeavyComponent /></Suspense>);
};exportdefaultApp;4、避免使用 内联对象
使用内联对象时，react会在每次渲染时重新创建对此对象的引用，这会导致接收此对象的组件将其视为不同的对象。因此，该组件对于props的千层比较始终返回false，导致组件一直渲染。
// Don't do this!
function Component(props) {const aProp = { someProp: 'someValue' }return <AComponent style={{ margin: 0 }} aProp={aProp} />
}// Do this instead :)
const styles = { margin: 0 };
function Component(props) {const aProp = { someProp: 'someValue' }return <AComponent style={styles} {...aProp} />
}5、避免内联函数和匿名函数
内联函数在每次渲染时都会创建新的引用，这可能会导致不必要的重新渲染。相反，在渲染逻辑之外定义函数或使用 useCallback 。
不良实践：
<button onClick={() => console.log('Clicked!')}>Click Me</button>良好实践：
const handleClick = () => console.log('Clicked!');
<button onClick={handleClick}>Click Me</button>;6、使用React.PureComponent , shouldComponentUpdate
父组件状态的每次更新，都会导致子组件的重新渲染，即使是传入相同props。但是这里的重新渲染不是说会更新DOM,而是每次都会调用diif算法来判断是否需要更新DOM。这对于大型组件例如组件树来说是非常消耗性能的。
在这里我们就可以使用React.PureComponent , shouldComponentUpdate生命周期来确保只有当组件props状态改变时才会重新渲染
PureComponent 是对类组件的 Props 和 State 进行浅比较；React.memo 是对函数组件的 Props 进行浅比较。
7、使用React.Fragment避免添加额外的DOM
function Component() {return (<React.Fragment><h1>Hello world!</h1><h1>Hello there!</h1><h1>Hello there again!</h1></React.Fragment>)} 8、减少状态和属性穿透
避免过度的状态更新和不必要的属性穿透：
使用 Context API 或像 Redux 或 Zustand 这样的状态管理库来管理全局状态。
将组件拆分为更小、更专注的组件，这些组件管理自己的状态。
9、优化图像和资源
大型图像和资源可能会减慢您的应用程序速度。以下是优化它们的方法：
使用像 ImageOptim 或 TinyPNG 这样的工具来压缩图像。
使用带有 srcset 属性的响应式图像或像 react-image 这样的库。
使用像 react-lazyload 这样的库来懒加载图像。
10、最小化依赖项
审核您的 package.json 以查找不必要的依赖项。大型依赖包可能会减慢您的应用程序速度。
使用像 Bundlephobia 这样的工具来分析依赖项的大小。
优先选择轻量级的替代方案或自定义解决方案。
额外奖励
使用性能监控工具
利用像 Lighthouse、Sentry 或 Datadog 这样的工具来监控和调试生产中的性能问题。
结论
总览：react的优化核心思想就是让react跳过重新渲染那个些没有改变的Component，而只重新渲染发生变化的Component。
优化您的 React Web 应用程序是一个持续的过程。首先使用 React 工具识别性能瓶颈，然后逐步应用这些技术。通过遵循这些步骤，您将提供更快、更高效的用户体验。
二、craco/webpack打包优化
1.懒加载图片、css、js，路由组件、antd组件按需加载
2.第三方的包，使用cdn，不要打包进来
3.拆分js
4.避免重复打包依赖
5.开启GZIP压缩
-
安装
craco:npm install @craco/craco -
修改
package.json中的脚本部分，使用craco代替react-scripts:"scripts": {"start": "craco start","build": "craco build","test": "craco test","eject": "react-scripts eject" } -
在项目根目录下创建一个
craco.config.js文件，用于自定义配置：
const FileManagerPlugin = require("filemanager-webpack-plugin");
const WebpackBar = require("webpackbar");
const { DllReferencePlugin } = require("webpack");
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const TerserPlugin = require("terser-webpack-plugin");
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const { addBeforeLoaders, removeLoaders, loaderByName } = require("@craco/craco");
const fs = require("fs");
const path = require("path");
const { name, version } = require("./package.json");
const manifest = require("./public/lib/vendor.json");const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
const appPath = resolveApp(".");
const appBuild = resolveApp("build");const smp = new SpeedMeasurePlugin();process.env.PORT = 3000;
// 环境信息
const env = process.env.REACT_APP_TARGET_ENV;let source = `${appPath}/config.dev.js`;
if (env === "test") {source = `${appPath}/config.test.js`;
} else if (env === "pre") {source = `${appPath}/config.pre.js`;
} else if (env === "pro") {source = `${appPath}/config.pro.js`;
} module.exports = {reactScriptsVersion: "react-scripts" /* (default value) */,babel: {plugins: [// lodash按需加载"lodash",],loaderOptions: {// babel-loader开启缓存cacheDirectory: true,},},plugins: [{plugin: {overrideDevServerConfig: ({ devServerConfig }) => {return {...devServerConfig,headers: {"Access-Control-Allow-Origin": "*",},};},overrideWebpackConfig: ({ webpackConfig, context: { env } }) => {if (env !== "development") {// 缩小生产环境所有loaders的检索范围webpackConfig.module.rules[0].oneOf.forEach((rule) => {rule.include = path.resolve(__dirname, "src");});} else {// 缩小本地开发环境所有loaders的检索范围webpackConfig.module.rules[0].include = path.resolve(__dirname, "src");webpackConfig.module.rules[1].oneOf.forEach((rule, index) => {rule.include = path.resolve(__dirname, "src");// 本地开发环境babel-loader比较耗时,故加上thread-loaderif (index === 3) {const babelLoader = {loader: rule.loader,options: rule.options,};rule.use = ["thread-loader", babelLoader];delete rule.loader;delete rule.options;}});}return {...webpackConfig,};},},},],webpack: smp.wrap({alias: {"@": path.resolve(__dirname, "src"),"@components": path.resolve(__dirname, "src/components"),"@containers": path.resolve(__dirname, "src/containers"),"@constants": path.resolve(__dirname, "src/constants"),"@utils": path.resolve(__dirname, "src/utils"),"@routes": path.resolve(__dirname, "src/routes"),"@assets": path.resolve(__dirname, "src/assets"),"@styles": path.resolve(__dirname, "src/styles"),"@services": path.resolve(__dirname, "src/services"),"@mocks": path.resolve(__dirname, "src/mocks"),"@hooks": path.resolve(__dirname, "src/hooks"),"@stories": path.resolve(__dirname, "src/stories"),},// configure: { /* Any webpack configuration options: https://webpack.js.org/configuration */ },configure: (webpackConfig, { env }) => {// 配置扩展扩展名优化webpackConfig.resolve.extensions = [".tsx", ".ts", ".jsx", ".js", ".scss", ".css", ".json"];// 作为子应用接入微前端的打包适配,不接入微前端可以不需要webpackConfig.output.library = `${name}-[name]`;webpackConfig.output.libraryTarget = "umd";webpackConfig.output.globalObject = "window";// splitChunks打包优化webpackConfig.optimization.splitChunks = {...webpackConfig.optimization.splitChunks,cacheGroups: {commons: {chunks: "all",// 将两个以上的chunk所共享的模块打包至commons组。minChunks: 2,name: "commons",priority: 80,},},};// 开启持久化缓存webpackConfig.cache.type = "filesystem";// 生产环境打包优化if (env !== "development") {webpackConfig.plugins = webpackConfig.plugins.concat(new FileManagerPlugin({events: {onEnd: {mkdir: [`zip/${name}/dist`, `zip/${name}/template`],copy: [{source: source,destination: `${appBuild}/config.js`,},{source: `${path.resolve("build")}`,destination: `zip/${name}/dist`,},{source: path.resolve("template"),destination: `zip/${name}/template`,},],archive: [{source: `zip`,destination: path.relative(__dirname, `./${name}-${version}-SNAPSHOT.tar.gz`),format: "tar",options: {gzip: true,gzipOptions: {level: 1,},globOptions: {nomount: true,},},},],delete: ["zip"],},},runTasksInSeries: true,}),new BundleAnalyzerPlugin({analyzerMode: "server",analyzerHost: "127.0.0.1",analyzerPort: 8889,openAnalyzer: true, // 构建完打开浏览器reportFilename: path.resolve(__dirname, `analyzer/index.html`),}),new CompressionWebpackPlugin({test: /\.(js|ts|jsx|tsx|css|scss)$/, //匹配要压缩的文件algorithm: "gzip",}),);webpackConfig.optimization.minimizer = [new TerserPlugin({parallel: true, //开启并行压缩，可以加快构建速度}),];// 生产环境关闭source-mapwebpackConfig.devtool = false;// 生产环境移除source-map-loaderremoveLoaders(webpackConfig, loaderByName("source-map-loader"));} else {addBeforeLoaders(webpackConfig, loaderByName("style-loader"), "thread-loader");addBeforeLoaders(webpackConfig, loaderByName("style-loader"), "cache-loader");}return webpackConfig;},plugins: [new WebpackBar(), new DllReferencePlugin({ manifest })],}),
};