静かな森
·
Shiki 性能优化 - 按需加载语法解析
💡
原文中文，约4500字，阅读约需11分钟。
📝
内容提要
Shiki是一个代码高亮库，但加载过慢且浪费流量。文章介绍了如何按需加载Shiki所需的语言解析器，减少加载时间和流量浪费。通过动态加载和使用use hook，实现了只加载需要的语言解析器。最后，提到了解决CLS（页面抖动）的方法。
🎯
关键要点
- Shiki是一个优秀的代码高亮库，但加载速度慢且浪费流量。
- 文章介绍了如何按需加载Shiki所需的语言解析器，以减少加载时间和流量浪费。
- 通过动态加载和使用use hook，可以实现只加载需要的语言解析器。
- 使用getLoadedLanguages和getHighlighterCore方法来动态加载语言，而不是一次性加载全部。
- 在Next.js中，如果不使用Server Component加载Shiki，则需要使用Client Component，但Client Component不支持top-level await。
- 使用Suspense和fallback可以减少页面抖动（CLS），但仍需提前占位以避免误操作。
- 在复杂的动态组件嵌套中，不建议使用Next.js App Router架构。
- 感谢antfu提供的解决方案，Shiro是一个简洁的个人网站，值得使用。
🏷️
标签
➡️
