React教程【高级】:性能优化

UI 更新需要昂贵的 DOM 操作,而 React 内部使用几种巧妙的技术以便最小化 DOM 操作次数。对于大部分应用而言,使用 React 时无需专门优化就已拥有高性能的用户界面。尽管如此,你仍然有办法来加速你的 React 应用。

使用生产版本

当你需要对你的 React 应用进行 benchmark,或者遇到了性能问题,请确保你正在使用压缩后的生产版本。

React 默认包含了许多有用的警告信息。这些警告信息在开发过程中非常有帮助。然而这使得 React 变得更大且更慢,所以你需要确保部署时使用了生产版本。

如果你不能确定你的编译过程是否设置正确,你可以通过安装 Chrome 的 React 开发者工具 来检查。如果你浏览一个基于 React 生产版本的网站,图标背景会变成深色:

React教程【高级】:性能优化

如果你浏览一个基于 React 开发模式的网站,图标背景会变成红色:

React教程【高级】:性能优化

推荐你在开发应用时使用开发模式,而在为用户部署应用时使用生产模式。

你可以在下面看到几种为应用构建生产版本的操作说明。

Create React App

如果你的项目是通过 Create React App 构建的,运行:

npm run build

这段命令将在你的项目下的 build/ 目录中生成对应的生产版本。

注意只有在生产部署前才需要执行这个命令。正常开发使用 npm start 即可。

单文件构建

我们提供了可以在生产环境使用的单文件版 React 和 React DOM:

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react/dom@16/umd/react/dom.production.min.js"></script>

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注


Fatal error: Uncaught JSMin_UnterminatedRegExpException: JSMin: Unterminated RegExp at byte 16879: /button> in /www/wwwroot/web176.cc/wp-content/plugins/autoptimize/classes/external/php/jsmin.php:266 Stack trace: #0 /www/wwwroot/web176.cc/wp-content/plugins/autoptimize/classes/external/php/jsmin.php(152): JSMin->action() #1 /www/wwwroot/web176.cc/wp-content/plugins/autoptimize/classes/external/php/jsmin.php(86): JSMin->min() #2 /www/wwwroot/web176.cc/wp-content/plugins/autoptimize/classes/external/php/ao-minify-html.php(257): JSMin::minify() #3 [internal function]: AO_Minify_HTML->_removeScriptCB() #4 /www/wwwroot/web176.cc/wp-content/plugins/autoptimize/classes/external/php/ao-minify-html.php(108): preg_replace_callback() #5 /www/wwwroot/web176.cc/wp-content/plugins/autoptimize/classes/external/php/ao-minify-html.php(47): AO_Minify_HTML->process() #6 /www/wwwroot/web176.cc/wp-content/plugins/autoptimize/classes/autoptimizeHTML.php(105): AO_Minify_HTML::minify() #7 /www/wwwroot/web176.cc/wp-content/plugins/autoptimize/cl in /www/wwwroot/web176.cc/wp-content/plugins/autoptimize/classes/external/php/jsmin.php on line 266