rxliuli blog
·
在构建时而非运行时编译 Markdown
原文中文，约7400字，阅读约需18分钟。
📝
内容提要
文章讨论了如何在构建时编译 Markdown，而非在运行时。作者重构了个人网站，发现运行时编译成本高，因此决定预编译为 HTML。经过调研，选择基于 unified.js 自行封装 Vite 插件，支持导入 Markdown 的元数据和生成 React 组件，最终实现了完整功能并发布至 npm。
🎯
关键要点
-
在构建时编译 Markdown 可以降低运行时成本。
-
直接使用 react-markdown 组件在运行时编译 Markdown 成本高，需要额外依赖。
-
经过调研，发现现有工具无法满足需求，决定基于 unified.js 自行封装 Vite 插件。
-
插件支持导入 Markdown 的元数据和生成 React 组件，使用 import query 进行不同类型的导入。
-
实现过程中解决了 Markdown 转换为 JSX 的兼容性问题，最终成功发布至 npm。
❓
延伸问答
为什么选择在构建时编译 Markdown 而不是运行时？
在构建时编译 Markdown 可以降低运行时成本，避免引入额外的依赖和资源消耗。
如何实现 Markdown 的预编译？
通过基于 unified.js 自行封装 Vite 插件，支持导入 Markdown 的元数据和生成 React 组件。
使用 react-markdown 组件的缺点是什么？
使用 react-markdown 组件在运行时编译 Markdown 成本高，需要额外依赖，且可能导致性能问题。
如何导入 Markdown 的元数据？
可以使用 import query，例如 './README.md?frontmatter' 来导入 Markdown 的元数据。
在实现过程中遇到了哪些问题？
遇到的问题包括如何将 Markdown 转换为兼容的 JSX，以及处理 HTML 与 JSX 之间的兼容性问题。
最终的插件发布在哪里？
完整功能的插件已实现并发布至 npm，名为 unplugin-markdown。
🏷️
