Astro 2.0大火？antd.design的bisheng如何？

大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

高级前端进阶

1.什么是bisheng？

选择了解bisheng是因为其在ant.design静态网站构建场景的突出表现。 bisheng旨在使用 React 将 Markdown（和其他带有转换器的静态文件）转换为静态网站和博客基于dora & webpack & React & react-router，具有以下特点：

• 支持 browserHistory，即使在 GitHub Pages 中也是如此。
• Markdown 数据的延迟加载。
• 支持插件系统以扩展默认行为。
• 支持用于 SEO 的服务器端渲染。
• 支持 react-helmet 以获得更好的 SEO。

毕升（bisheng）是中国第一个活字印刷技术的发明者。

bisheng的整体技术流程如下图所示：

• 输入：markdown源文件
• 构建：使用Babel、webpack等技术将markdown转化为react组件，最终渲染页面。

关于bisheng的原理可以继续阅读文末提供的我介绍bisheng原理的一篇文章。

2.bisheng的使用？

安装&使用

npm install --save-dev bisheng           

然后，将启动命令添加到 npm 脚本：

module.exports = {
  source: './posts',
  output: './_site',
  theme: './_theme',
  port: 8000,
};           

注意：请确source和theme存在，theme不能为空目录。如果不知道如何开发theme，请使用 bisheng-theme-one。

3.什么是Astro?

Astro 是一种流行的 Web 框架，用于构建以内容为中心的高性能网站。代表下一代前端架构，可以优化网站，允许使用已有的UI 框架（如 React、Svelte 和 Vue等），使得站点加载速度提高 33%，JavaScript 大小减少 90%。

Astro允许从文件系统、CMS、数据库或 API 远程获取内容

Astro 2.0 是第一个为 Markdown 和 MDX 提供完整类型安全的 Web 框架。 Astro可以通过内置的解析、验证和自动 TypeScript 类型生成来组织Markdown。 对于在站点上使用 Markdown 来说，Astro 2.0绝对是首选。

MDX 是一种可编辑格式，可在 Markdown 文档中编写 JSX。可以导入诸如交互式图表或 alert 之类的组件，并将其嵌入到文档内容中，使得让组件编写长格式内容变得很丝滑。

在Astro 2.0中又集成了更多优秀功能，比如：

• Markdown 和 MDX 的自动类型安全检测
• 混合渲染：静态&动态结合
• 重新设计错误
• 开发服务器优化
• Vite 4.0

4.bisheng vs Astro?

4.1 核心能力对比

从两者解决的问题来看具有一定的相似性，但是有以下几个比较明显的差异。

• bisheng主要聚焦在静态网站构建场景，对于markdown输入源具有一定的限制。而相比之下Astro更加强大，Astro允许从文件系统、CMS、数据库甚至远程 API获取内容。
• bisheng主要导出对象为React组件，而Astro支持React、Svelte 和 Vue等诸多框架
• 在安全性检测、混合渲染、开发服务器优化等诸多场景Astro具有明显优势

4.2 流行度对比

流行度对比

从NPM下载量来看，bisheng周下载量只有504，而且处于下降趋势。而Astro周下载量达到了55879，同时处于明显的上升趋势，在这一点上Astro几乎完胜bisheng。

bisheng和Astro的github数据对比

从Github的数据来看，bisheng最后一次更新是一年前，而Astro几乎是几分钟之前，所以在活跃度、开发支持方面Astro也更胜一筹。

截止本文编写时间，Astro的star是26.6k，fork也达到了1.3k。相比之下bisheng的star只有2.8k，fork为434，因此在热度上面也几乎无法与Astro相比。

当然，这些只是在数据上的对Astro和bisheng的简单比较，至于那个适合自己的项目要以真实情况为准。

5.本文总结

本文主要和大家介绍bisheng和Astro，前者专注于静态站点生成，而后者已经支持混合渲染。除了基础核心能力的比较，还从NPM和Github的数据层面做了对比。

文末的参考资料提供了大量优秀文档以供学习，如果有兴趣可以自行阅读。如果大家有什么疑问欢迎在评论区留言。

参考资料

https://github.com/liangklfangl/bisheng-sourceCode-plugin

https://github.com/benjycui/bisheng