本周黑板报 #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 才是最快的，像这样：

keywords:react schedule

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

再结合 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）

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 导航，而非整页刷新

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>
}