rxliuli blog
·
在构建时而非运行时编译 Markdown
内容提要
文章讨论了如何在构建时编译 Markdown，而非在运行时。作者重构了个人网站，发现运行时编译成本高，因此决定预编译为 HTML。经过调研，选择基于 unified.js 自行封装 Vite 插件，支持导入 Markdown 的元数据和生成 React 组件，最终实现了完整功能并发布至 npm。
关键要点
-
在构建时编译 Markdown 可以降低运行时成本。
-
直接使用 react-markdown 组件在运行时编译 Markdown 成本高，需要额外依赖。
-
经过调研，发现现有工具无法满足需求，决定基于 unified.js 自行封装 Vite 插件。
-
插件支持导入 Markdown 的元数据和生成 React 组件，使用 import query 进行不同类型的导入。
-
实现过程中解决了 Markdown 转换为 JSX 的兼容性问题，最终成功发布至 npm。
延伸解读
构建时编译的优势
在构建时编译 Markdown 可以显著降低运行时的性能开销，尤其是在大型项目中。通过预编译为 HTML，开发者可以减少对运行时依赖的需求，从而提高页面加载速度和用户体验。
工具选择的重要性
在选择 Markdown 编译工具时，开发者需考虑项目的具体需求。文章中提到的现有工具未能满足需求，强调了定制化解决方案的重要性。基于 unified.js 自行封装的 Vite 插件，展示了灵活应对特定场景的能力。
兼容性问题的挑战
将 Markdown 转换为 JSX 时，兼容性问题是一个常见挑战。文章提到的 HTML 与 JSX 不完全兼容，提醒开发者在实现过程中需仔细处理这些细节，以避免潜在的编译错误。
延伸问答
为什么选择在构建时编译 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。
