作为独立开发者构建 TypeScript 视频编辑器
原文英文，约1900词，阅读约需7分钟。
📝
内容提要
作者在经历四年的SaaS开发后，重建了一个简单的视频编辑器，使用Svelte 5和Pixi.js等技术。该编辑器通过同步视频和音频元素、处理文本渲染等功能，解决了多个技术挑战。尽管存在性能问题，作者仍在持续优化，期待投入生产。
🔎
延伸解读
技术选型的影响
作者选择了Svelte 5和Pixi.js作为视频编辑器的核心技术，这些技术的灵活性和性能直接影响了编辑器的功能实现和用户体验。Svelte的组件化设计使得状态管理更加高效，而Pixi.js则提供了强大的图形渲染能力。开发者在选择技术栈时，应考虑这些技术对项目长期维护和扩展的影响。
性能优化的挑战
在构建视频编辑器的过程中，作者遇到了性能瓶颈，尤其是在视频渲染速度上。为了解决这个问题，作者决定将Pixi.js从8降级到7，以提高渲染速度。这提醒开发者在技术迭代中，性能优化是一个持续的挑战，需根据实际情况灵活调整技术选择。
组件设计的思考
作者采用了组合而非继承的方式重构组件，简化了生命周期管理。这种设计思路有助于提高代码的可维护性和可扩展性。开发者在设计组件时，可以借鉴这种方法，避免复杂的继承关系，提升项目的灵活性和可读性。
❓
Q&A
这个视频编辑器使用了哪些技术栈？
视频编辑器使用了Svelte 5和Pixi.js等技术。
在构建视频编辑器时遇到了哪些主要挑战？
主要挑战包括同步视频和音频与时间线、处理文本渲染等。
作者是如何处理文本渲染问题的？
作者创建了SVGGenerator类，使用CSS和GSAP的TextSplitter来处理文本渲染。
为什么作者决定将Pixi.js从8降级到7？
因为Pixi 7的“遗留”版本支持2D画布，渲染速度更快。
视频编辑器的后端是如何处理渲染请求的？
后端使用Express和BullMQ处理渲染请求，并使用Playwright/Puppeteer进行视频帧处理。
作者对新视频编辑器的未来有什么计划？
作者期待在解决现有问题后将新编辑器投入生产。
🏷️
