React-性能优化

[PleaseStartYourPerformance]

1.首屏渲染优化。

<div id="root"> SVG </div>

也可以使用插件 prerender-spa-plugin 插件进行首屏渲染。

2.页面切换优化。使用 html-webpack-plugin 插件自动插入 loading，这样切换的时候，就不需要在每个页面都写一套 loading。

3.减少业务代码体积。通过 Tree Shaking 来减少一些代码。

4.提取公共代码。通过 SplitChunkPlugin 自动拆分业务基础库，减少大文件的存在。

5.切分代码。通过 Code Splitting 来懒加载代码，提高用户的加载体验。例如通过 React Loadable 来将组件改写成支持动态 import 的形式。

6.懒加载。React 可以通过 react-lazyload 这种成熟组件来进行懒加载的支持。

7.页面占位。有时候加载页面的文本、图片的时候，会出现 “闪屏” 的情况，比如图片或者文字没有加载完毕，对应位置空白，然后加载完毕，会突然撑开页面，导致闪屏。这时候使用第三方组件 react-placeholder 可以解决这种情况。

链接：https://juejin.cn/post/6904412477547773959?utm_source=gold_browser_extension#chapter-one

链接：https://juejin.cn/post/6908895801116721160?utm_source=gold_browser_extension