alifeiliu: "大厂外包工当外包的一周。周二临危受命，要为组里AI大赛写一个demo出来，从0到1搭建了个后台信息管理系统框架，周二早"

alifeiliu·3 months ago

大厂外包工

当外包的一周。周二临危受命，要为组里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>
}

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