Roadmap

[magic-akari]

本仓库作为我探索前端开发的一个重要实验场。同时具有实用性，至少我自己是这个工具的长期用户。

在此之前，已经验证了接近无脚手架的开发环境。

本仓库中，React 作为全局依赖，且几乎没有第三方依赖，这是为了规避 ESM 的路径解析问题。

时至今日，import-map 作为一个可能的解。但是总体来说这个困境没什么变化。

---

在此之后，此仓库将会用于探索工具链的使用。

• 此仓库中有部分依赖 TS 独有的特性，会造成迁移困难，如 const enum。会逐渐移除这些特性，并开启 isolatedModules 选项。
• 使用 vite (待定)等现代化工具改善开发体验。makefile 等脚本将会被移除，Dockerfile 也没有继续保留的意义。
• 引入 SWC 作为编译器。可能使用 Rollup/Webpack 叠加 SWC 的 loader 来打包，或者 swcpack 来打包，也可能继续保留 native ESM 状态。web bundle 需要调查一下。
• 代码内部涉及到具体细节的部分，有些比较 hack 的，会替换成常规写法。
• 曾经考虑自己写渲染引擎，把 React 替换下来。但是目前来看这个目标实现难度很大。

---

技术之外，产品细节

• 通过分析音频数据，自动在打轴的时候吸附音量突变的地方。

难度较大，可能需要先傅立叶变换来去除乐器音，留下人声，然后再设置阈值检测突变。

• drop 一些旧浏览器，如 Edge，旧版本 Safari

[magic-akari]

• lrc-parser.js 借助 TS 的 references 功能，把整个目录映射到产物，非常 hacky
  • 考虑 pnpm 的 monorepo
• 有部分 const enum 被定义在全局类型空间，但是被当作值使用，在 tsc 编译时会被替换成常量。这导致和 tsc 的深度绑定，其他工具无法处理
  • 换成普通的 const 变量，其他的元信息写到 html 文件里
• html 文件是通过 renderToStaticMarkup 生成的，且有复杂的 SRI 计算过程。这部分应该能简化
  • vite 或许能解决。或者最简单的，两个 html，一个用于开发，另一个用于部署

[unbadfish]

* 通过分析音频数据，自动在打轴的时候吸附音量突变的地方。

难度较大，可能需要先傅立叶变换来去除乐器音，留下人声，然后再设置阈值检测突变。

这个难度不是一般大，建议直接放弃在网页前端搞定它的“幻想”
光是第一步“可能需要先傅立叶变换来去除乐器音，留下人声”，就有极其巨大的工作量，g站上有些项目（含训练模型）有几个G的容量
见这个项目 https://github.com/Anjok07/ultimatevocalremovergui

就是搞前端的话考虑把布局优化一下 👍

[magic-akari]

下一步：

• svg 优化: https://www.npmjs.com/package/svg-sprite
• Lightning CSS https://lightningcss.dev/

有一些 SVG 被直接放到 React 树中，在 React Reconciliation 中造成了不必要的性能开销，
可以考虑 svg-sprite 技术，在 React 数中留下简单的 svg 引用，或 img src 引用。

postcss 只用到了有限的几个插件，可以被 Lightning CSS 覆盖。