React 性能优化实战（一）：性能瓶颈分析方法
文章简介介绍在 React 项目中常见的性能瓶颈类型，梳理定位和分析性能问题的常用方法与工具，为后续优化打下基础。 主要内容性能瓶颈的常见表现 首屏加载慢，白屏时间长 页面滚动、动画卡顿，FPS 低 交互响应迟钝，点击、输入延迟 组件频繁重渲染，CPU 占用高 内存泄漏，页面长时间运行后变慢甚至崩溃 性能分析的基本思路 明确性能目标与关键指标（如 FCP、TTI、LCP、FPS 等） 复现性能问题，收集相关数据 利用工具定位瓶颈（网络、渲染、JS 执行、内存等） 结合代码结构分析，找出根因 制定并验证优化方案 浏览器性能分析工具1. Chrome DevTools Performance 面板：录制页面性能快照，分析 JS 执行、渲染、重排重绘等耗时 Memory 面板：检测内存泄漏、对象分配 Network 面板：分析资源加载瓶颈 常用操作 录制性能快照，查找长任务（Long Task） 查看 Main 线程耗时分布 分析 Timeline，定位卡顿点 2. React Profiler用于分析组件渲染耗时、识别不必要的重渲染。 使用方法（React 18 +...
四、建站过程——ButterFly主题配置
Butterfly 主题配置过程1. 安装 Butterfly 主题首先，确保你的 Hexo 博客已经搭建完成。然后，在你的 Hexo 博客根目录下打开终端，运行以下命令安装 Butterfly 主题： 1npm install hexo-theme-butterfly 安装完成后，修改 Hexo 根目录下的 _config.yml 文件，将 theme 的值更改为 butterfly。 1theme: butterfly 2. 创建主题配置文件为了方便管理和升级主题，建议不要直接修改主题文件夹下的配置文件。可以将 node_modules 文件夹下 hexo-theme-butterfly 中的 _config.yml 文件复制到 Hexo 项目根目录下，并重命名为 _config.butterfly.yml。 1cp -i node_modules/hexo-theme-butterfly/_config.yml _config.butterfly.yml Hexo 会优先读取根目录下的 _config.butterfly.yml 文件作为主题配置文件。 3....
三、建站过程——Hexo搭建
Hexo 搭建过程1. 安装 Node.js 和 Gitnode 使用 nvm 管理、git 使用 homebrew 安装即可（windows 使用安装包即可 2. 安装 Hexo打开终端，运行以下命令全局安装 Hexo CLI： 1npm install -g hexo-cli 安装完成后，验证 Hexo 是否安装成功： 1hexo version 3. 初始化博客选择一个合适的目录，运行以下命令初始化一个新的 Hexo 博客： 123hexo init <folder>cd <folder>npm install <folder> 是你想要创建博客的文件夹名称。npm install 命令会安装博客所需的依赖。 4. 生成和预览博客初始化完成后，可以生成静态文件并在本地预览博客： 12hexo generatehexo server 运行 hexo server 后，通常可以在浏览器中访问 http://localhost:4000 查看你的博客。 部署到 GitHub Pages将 Hexo 博客部署到 GitHub Pages...
二、建站过程——Rspress尝试
Rspress 尝试过程Rspress 是一个基于 Rspack 的静态站点生成器，特别适合用于构建文档网站。在框架选型阶段，我也尝试了 Rspress，以下是尝试过程及一些心得。 Rspress 搭建过程搭建 Rspress 的过程相对直接，主要参考了其官方文档 步骤大致如下： 初始化项目: 可以通过脚手架 npm create rspress@latest 或手动创建目录并初始化 npm 项目。我选择了手动方式，创建了项目目录并运行 npm init -y。 安装 Rspress: 使用 npm、pnpm、yarn 或 bun 安装 Rspress 作为开发依赖。我使用了 npm：npm install rspress -D 创建文档目录和首页: 按照约定，创建 docs 目录并在其中创建 index.md 作为首页：mkdir docs && echo '# Hello world' > docs/index.md 配置 package.json 脚本: 在 package.json...
一、建站过程——框架选型
建站框架选型过程在搭建个人博客的初期，我调研了几种流行的静态站点生成器，旨在找到一个既能满足我的技术偏好，又能提供良好写作和维护体验的框架。以下是我当时考虑的几个主要选项： 1. NextraNextra 是基于 Next.js 的静态站点生成器，特别适合构建文档网站。它利用了 Next.js 的强大功能，如文件系统路由、API 路由等，并且支持 MDX，可以直接在 Markdown 中使用 React 组件。Nextra 的优势在于其灵活性和与 React 生态的紧密结合，对于熟悉 Next.js 的开发者来说非常友好。然而，对于一个以博客为主的站点，Nextra 可能显得有些“重”，且其主要设计目标是文档，而非传统意义上的博客。 2. DumiDumi 是基于 UmiJS 的组件级文档和静态站点工具，主要面向组件开发者。它提供了丰富的组件演示和调试能力，内置全文搜索，并且编译性能优秀。Dumi 在展示组件和构建组件库文档方面表现出色，但与 Nextra 类似，它更侧重于技术文档和组件展示，用于个人博客可能不是最直接的选择。 3. RspressRspress 是基于...