静かな森
·
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是一个简洁的个人网站，值得使用。
❓
延伸问答
Shiki是什么，它的主要功能是什么？
Shiki是一个代码高亮库，主要用于对代码进行高亮显示。
如何解决Shiki加载速度慢和流量浪费的问题？
通过按需加载Shiki所需的语言解析器，可以减少加载时间和流量浪费。
在Next.js中如何动态加载Shiki语言解析器？
可以使用getLoadedLanguages和getHighlighterCore方法来动态加载需要的语言解析器，而不是一次性加载全部。
使用Suspense和fallback有什么作用？
使用Suspense和fallback可以减少页面抖动（CLS），但需要提前占位以避免误操作。
在复杂的动态组件嵌套中，使用Next.js App Router有什么限制？
在复杂的动态组件嵌套中，不建议使用Next.js App Router架构，因为可能会导致性能问题。
Shiki的按需加载实现中使用了哪些React特性？
按需加载实现中使用了use hook和Promise来动态加载需要的语言解析器。
🏷️
标签
➡️
