面试了许多求职者，很多求职者只知其然，而不知所以然，写此文章为广大前端小伙伴指引迷津。纯干货！纯干货！纯干货！

目录

• 性能优化
  • 性能优化

性能优化

性能优化

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 可以解决这种情况。

小白也是新手面试官，欢迎领导莅临指导工作，提出建议，小白不胜感激，不喜勿喷，点赞收藏随机送程序媛小姐姐一枚哦！！！