本週黑板報 #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>
}