本周黑板报 #4

大厂外包工

当外包的一周。周二临危受命，要为组里 AI 大赛写一个 demo 出来，从 0 到 1 搭建了个后台信息管理系统框架，周二早上对齐开发内容（8 个页面），demo 版 deadline 为周四（后又改为周五）
中后台在厂里可是只有外包同学才会做的业务（ps. 没有歧视工种，🐶保命

亚历山大

亚历山大的原因在于，在厂里这段时间做的事情过于零碎，对系统性能力提升没有太大帮助，加上太长时间没接触过中后台项目了，过于生疏，而只留给自己 2-3 天，一直觉得是个完不成的任务

破局

扛着压力破局点，我于周二当天群里承诺搭完框架，使得周三大家可以各司其职，顺利开始开发起来，不耽误进度。各自做好自己负责的页面，周三周四完成 demo 版的 80% 工作，周四 / 周五老板 / 大老板的点名认可，让我们几个人非常有成就感，我也对自己比较满意，有时候真就被逼出来的！

选型

进行一个简单罗列，不怕丢人：

基础框架：webpack5+React18+react-router-dom

组件系统：antd

语言：ts+sass

其他：immer、schedule-x、dayjs

也能看得出来没做更深思考，想到啥就 install 就完了，一切为了快，怎么快怎么来
唯一的收获就是知道了通过配置webpack-dev-server --host 0.0.0.0+devServer.host = 0.0.0.0，项目运行起来后，同时显示 iPv4/6 项目运行地址，局域网内其他机器可访问本地服务

摸鱼学习

throttle vs debounce

节流，一段时间内只触发一次执行，多次触发无效。滚动
防抖，一段时间后执行，多次触发重新计时。输入查询防抖

如何找 package

原来去 npm 按关键词搜想要的 package 才是最快的，像这样：

Copy
keywords:react schedule

借匹配结果，推荐几款 schedule 组件：

schedule-x 强烈推荐！！！

react-beautiful-schedule

devextreme-reactive

planby

fullcalendar

再结合 Google search，你大概率能找到你想要且能用的 package

性能优化

浏览器兼容

Google 提供的core-web-vitalspackage web-vitals API 或许在某些浏览器上并不能正确计算出相应指标值，此乃浏览器兼容性，这样去怀疑确实也合理

Next.js learning

借 Next.js 学习教程，了解到其在性能优化方面的考量

font 优化

提供 next/font/google、next/font/local 将字体资源合并入静态资源，无需加载，优化 CLS

img 优化

提供Image组件

不同设备、尺寸显示响应性图片

明确尺寸，优化 CLS

懒加载，仅加载视口内图片（no manually）

Copy
import Image from 'next/image';
export default function Page() {
return <Image
src={'/hero-desktop.png'}
width={1000}
height={760}
className="hidden md:block"
alt="Screenshots of the dashboard project showing desktop version"
/>
}

link 优化

提供 Link 组件，支持 CSR 导航，而非整页刷新

Copy
import Link from 'next/link';
export default function Page() {
return <Link
key={link.name}
href={link.href}
className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3"
>{link.name}

}

生产环境下，Link 标签出现于视口中时有 prefetch 优化，提高 near-instant open 体验

Page

Next.js 特殊文件page.tsx - path segments，基于路由的 code-split 支持，不同页面间相互独立互不影响

Layout

Next.js 特殊文件layout.tsx - shared UI partial re-render

Loading

Next.js 特殊文件loading.tsx - 路由级别异步组件 Suspense fallback

Error

Next.js 特殊文件error.tsx - 捕获预期外的异常，定义一个 Error UI boundary

404NotFound

Next.js 特殊文件not-found.tsx - 链接 / 资源获取不到时，定义一个 404 UI boundary。展示优先级高于error.tsx，若未定义则展示error.tsx

静态渲染 vs 动态渲染

静态：

更快的使用体验

静态内容利于缓存，减轻服务端负载

SEO 良好

动态：

经常变化的数据

个性化数据，千人千面

实时信息

流式渲染

页面中不同 chunks 并行加载解析渲染，有效避免慢请求对页面整体加载的影响，Next.js 中实现流式渲染的两种方式：

loading.tsx，Next.js 特殊文件，相当于 React Suspense 组件的 fallback UI，内容尚未加载出来前过渡组件，stream 整个页面

React Suspense，组件 / 一组组件粒度的延迟渲染，根据条件动态渲染组件

什么时候考虑？

用户体验，优先交互

模块展示优先级

数据获取

最佳实践：

whole page：loading.tsx可实现页面级别加载过渡，但可能因为个别组件太慢而让用户等待时间过长，拖慢页面内容渲染速度

every component：组件个个接踵而至出现，体验差点意思

page section：需创建 wrapper 组件包裹多个组件

PPR - 实验阶段加载模型

Pre Partial Render，部分预渲染，fallback 部分作为 static content 预渲染嵌入 HTML 中，dynamic content 随用户访问对应路由，再动态懒加载嵌入

URL Search Params

benefits：

链接可收藏、可分享

利于 SSR，服务端同样能拿到参数进行数据获取于渲染

携带用户查询参数，利于用户行为分析

URL Query 中传递取值而非单独维护 component state

hooks：

useSearchParams

usePathname

useRouter：编程式导航

CSC vs SSC

客户端渲染可用服务端渲染不可用：

Event Listener

hooks

document、window 等 API

SEO

TDK、Open Graph Metadata

有趣的事儿

谷歌出品必属精品！

Google Fonts

Google Calendar