liuli-moe / to-the-stars

魔法少女小圆 飞向星空 中文翻译
http://tts.liuli.moe/
51 stars 16 forks source link

feat: 考虑迁移至 docusaurus #23

Closed rxliuli closed 1 year ago

rxliuli commented 1 year ago

已发布预览: https://tts-next.liuli.moe/

动机

vuepress 目前仍未发布 2.0 正式版,这已经持续 2 年之久 了,在 beta 时也做过一次 break change 导致前后的插件完全不一致,再加上最近遇到了一些麻烦的问题,所以考虑迁移至生态更好的 docusaurus。

image

为什么之前没有使用

  1. 在创建该项目时,docusaurus 刚发布 2.0,存在各种各样的问题。与之相比,vuepress 则已经被使用和验证过了。
  2. docusaurus 基于 webpack 而非 vite,前者比后者的性能差了一个数量级
  3. docusaurus 至今仍然不支持 ts 配置

目前调研的问题

andylizi commented 1 year ago

VuePress is now in maintenance mode. For a next-gen Vue-based SSG built on top of Vue 3 + Vite, check out VitePress.

既然主页都明确说不继续开发了,那当然永远不可能发正式版。我没了解过 vitepress,不知你觉得怎样?

rxliuli commented 1 year ago

没,它们还在积极维护,只是更换了仓库 https://github.com/vuepress/vuepress-next

既然主页都明确说不继续开发了,那当然永远不可能发正式版。我没了解过 vitepress,不知你觉得怎样?

vitepress 吾辈理解是更加倾向于为 vue 官方的项目提供文档支持的框架,所以它不提供插件支持,这导致自定义必须使用自定义主题实现。

rxliuli commented 1 year ago

docusaurus 已知的构建性能问题,ref: https://github.com/facebook/docusaurus/issues/4765

刚从 vite-vuepress 迁移过来,但我认为 docusaurus 还有很大的性能提升空间,一个基本构建性能对比。

docusaurus

$ time pnpm docs-build

> to-the-stars@1.0.0 docs-build C:\Users\rxliuli\Code\book\to-the-stars
> docusaurus build

[INFO] [zh-Hans] Creating an optimized production build...

✔ Client

✔ Server
  Compiled successfully in 39.38s

✔ Client

● Server █████████████████████████ cache (99%) shutdown IdleFileCachePlugin
 stored

[SUCCESS] Generated static files in "build".
[INFO] Use `npm run serve` command to test your build locally.

real    0m51.324s
user    0m0.030s
sys     0m0.075s

vite-vuepress

$ time pnpm docs-build

> to-the-stars@1.0.0 docs-build C:\Users\rxliuli\Code\book\test-tts
> pnpm docs-setup && vuepress build && rimraf .vuepress/dist/books/

> to-the-stars@1.0.0 docs-setup C:\Users\rxliuli\Code\book\test-tts
> tsx .vuepress/init.ts

⠼ Initializing and preparing dataindex start 82
index end 82
⠴ Initializing and preparing dataindex write
✔ Initializing and preparing data - done in 2.55s
✔ Compiling with vite - done in 10.69s
✔ Rendering 85 pages - done in 2.19s
✔ Generating sitemap to sitemap.xml - done in 7ms
success VuePress build completed in 16.11s!

real    0m18.996s
user    0m0.030s
sys     0m0.045s

文档站点的大概信息

$ cloc books/
      83 text files.
      83 unique files.
      15 files ignored.

github.com/AlDanial/cloc v 1.94  T=0.52 s (158.4 files/s, 112091.4 lines/s)
-------------------------------------------------------------------------------
Language                     files          blank        comment           code
-------------------------------------------------------------------------------
Markdown                        83          29090              0          29645
-------------------------------------------------------------------------------
SUM:                            83          29090              0          29645
-------------------------------------------------------------------------------

不确定具体原因,但猜测可能包括下面几个

  1. 使用 babel 而不是 esbuild/swc 这种原生编译器
  2. 使用 webpack 而非更好的 bundle,例如 rollup?
  3. 使用 mdx 而非 markdown-it(我很喜欢 mdast 系列的工具包,但它的 npm 包太过零散,很难相信它的性能是比较好的)
ArgusK17 commented 1 year ago

新版本在手机浏览器似乎有些问题,调不出目录,因此选不了章/捂脸

rxliuli commented 1 year ago

新版本在手机浏览器似乎有些问题,调不出目录,因此选不了章 / 捂脸

在二级菜单里面

  1. 调出侧边栏菜单 image
  2. 点击阅读 image
  3. 选择章节 image
ArgusK17 commented 1 year ago

在二级菜单里面

不我这个菜单也打不开

哦我又试了一下,华为自己的浏览器可以,chrome和其它一些轻量浏览器不行,不确定是什么原因

rxliuli commented 1 year ago

在二级菜单里面

不我这个菜单也打不开

上面更新了一下步骤,可能还是改一下首页比较好

ArgusK17 commented 1 year ago

chrome的问题在于打不开侧边栏…… 包括via也是

rxliuli commented 1 year ago

https://user-images.githubusercontent.com/24560368/192136501-811ac887-e562-4745-842a-1252a3f68a4b.mp4

ArgusK17 commented 1 year ago

会出现问题的浏览器: chrome (版本74.0.3729.136):

https://user-images.githubusercontent.com/60059745/192136679-a5671894-7d09-4035-a465-dec1cbd34d1b.mp4

via:

https://user-images.githubusercontent.com/60059745/192136973-4cd4e0b5-9e11-43bc-adc8-17b766e3808e.mp4

ArgusK17 commented 1 year ago

https://user-images.githubusercontent.com/60059745/192136737-c97bd3dd-edde-4f81-b300-3d13b5218f08.mp4

华为自己的浏览器没有这些问题

rxliuli commented 1 year ago

会出现问题的浏览器: chrome (版本74.0.3729.136):

58f544c5f1e5565a77e7078762ec71cb.mp4 via:

60aa287a632ec420bdd003732bf474b4.mp4

有点奇怪。。。控制台有什么错误么?或许应该向 docusaurus 官方报错

PS1: 吾辈测试了这两个浏览器,看起来都是正常的 PS2:吾辈更新了一下首页,添加了一个阅读按钮和大的章节链接列表 image

rxliuli commented 1 year ago

chrome (版本74.0.3729.136):

另外可以帮忙确认一下更新到最新版是否可用么?最新版本的 chrome 是 105

rxliuli commented 1 year ago

更新了 esbuild.target 构建目标为 es2017,可以再试试看么?

另外 chrome 77 是 2019-09-12 发布的,确实有点老了。。。

ArgusK17 commented 1 year ago

现在都没有问题了

rxliuli commented 1 year ago

搜索引擎已索引网站,可以直接搜索到内容了 Screenshot_20221007-114832.jpg Screenshot_20221007-114517