🚀站点性能优化

发现问题

在对 Tzu-Wei Space 进行了一些功能迭代后，发现首页的加载速度变得非常糟糕

从输入网址按下回车后，网站首页有大约 7-8s 的时间都处于加载的状态（浏览器 Tab Favicon 外一直在转圈）😮‍💨

于是使用 Lighthouse 和 @next/bundle-analyzer 给网站把个脉，测评结果也确实和预料当中的一样拉胯 ...

优化前的报告：

在报告中，解决 Reduce unused JavaScript 一项预计可以节省 1.57s

为了实现优化，采取了以下方法：

对于出现频率极低的 Mathjax，使用预先渲染好的 Latex 图片进行替代。这样可以避免每次加载页面时都需要解析和渲染 Mathjax，从而减少了页面的加载时间和资源消耗
使用 next/dynamic 动态加载组件的方式，避免了单一的 js 文件过大。通过按需加载组件，可以将组件的加载延迟到页面需要时再进行，从而提高了页面的加载速度和性能
对于体积特别大的第三方库，例如 osmd 和 mermaid，采用了 next/script 在页面需要相应功能时进行注入，而不是将它们打包到项目的主要 js 文件中。这样做的好处是避免了将大型库打包到初始加载的文件中，减小了初始加载的文件大小，提高了页面的加载速度
使用 contentlayer 替代 react-markdown 和 react-syntax-highlighter，把在客户端中对 Markdown 的渲染转移到了 Node.js 环境中。这种转移可以在构建过程中完成，减轻了客户端的工作量，从而提高了页面渲染的速度和性能

经历了上述的优化后，成功将 client 打包体积从原来的 4.24MB 减少到 657.29 KB，实现了约 84.50% 的缩减 🚀

此外，还取得了以下优化成果：

优化后的报告：