Lyt.js：一个零依赖的轻量级前端框架

idcu
30 阅读4分钟

Lyt.js：一个零依赖的轻量级前端框架

作者：Lyt.js Team | 发布时间：2025 年 4 月

在 2025 年的前端框架生态中，Vue、React、Angular 三足鼎立，Svelte、Solid.js 等新兴框架各具特色。然而，这些框架或多或少都存在一些共同的痛点：运行时依赖、包体积膨胀、学习曲线陡峭。今天，我想向大家介绍一个不一样的选择 —— Lyt.js。

什么是 Lyt.js？

Lyt.js（发音 "light"）是一个零运行时依赖的轻量级前端框架，目前版本 v4.1.0，由纯 TypeScript 编写。它的 Slogan 是"轻写轻跑，所见即代码"，核心理念是让开发者用最少的代码完成最多的功能，同时保持极致的运行时性能。

Lyt.js 的一些关键数字：

  • 24 个包：Monorepo 架构，模块化设计，按需引入
  • 97,000+ 行 TypeScript：完整的框架实现，包含编译器、响应式系统、渲染器
  • 2,815+ 个测试用例：高覆盖率，保证代码质量
  • ~35KB gzip：完整框架体积，远小于 Vue 3（~44KB）和 Angular（~140KB）
  • 0 个运行时依赖：真正的零依赖，不依赖任何第三方包

为什么选择 Lyt.js？

1. 零依赖，真正的轻量

Lyt.js 的所有功能都是从零实现的，包括响应式系统、虚拟 DOM、编译器、路由等。这意味着：

  • 没有供应链安全风险
  • 没有版本冲突问题
  • 没有隐式依赖导致的性能损耗
  • 完全可控的代码质量和行为

2. 双响应式系统

这是 Lyt.js 最独特的特性。它同时支持两种响应式模式：

  • Proxy 模式（默认）：与 Vue 3 兼容的深层响应式代理，适合大多数场景
  • Signal 模式：类似 Solid.js 的细粒度响应式，适合性能敏感场景

更厉害的是，你可以在同一个应用中混用两种模式 —— 甚至在同一个组件中通过 reactivityMode 选项切换。

3. 增强型模板语法

Lyt.js 的模板语法在 Vue 的基础上做了简化，去掉了繁琐的 v- 前缀：

<!-- Vue 3 写法 -->
<div v-if="show" v-for="item in list" :class="cls" @click="handle">
  {{ item.name }}
</div>

<!-- Lyt.js 写法 -->
<div if="show" each="item in list" :class="cls" on:click="handle">
  {{ item.name }}
</div>

更简洁、更直观，减少了模板中的噪音字符。

4. 五种渲染模式

Lyt.js 提供了五种渲染器，覆盖全场景：

渲染模式状态说明
DOM稳定传统虚拟 DOM 渲染，兼容性最好
SSR稳定服务端渲染，支持 SEO 优化
Vapor实验性无虚拟 DOM，直接 DOM 操作，极致性能
MiniApp规划中小程序渲染，扩展到移动端
Native规划中原生渲染，扩展到桌面/移动端

5. 完整的工具链

v4.1.0 新增了多项开发者体验提升：

  • VSCode 扩展：语法高亮、代码补全、类型检查
  • TypeScript 类型生成器：自动为 .lyt 文件生成 .d.ts 类型声明
  • VitePress 文档站：完整的官方文档
  • GitHub Actions CI/CD：自动化测试和文档部署

快速上手

安装 Lyt.js 非常简单：

npm install @lytjs/core

# 或使用 pnpm
pnpm add @lytjs/core

创建你的第一个 Lyt.js 应用：

import { createApp, defineComponent } from '@lytjs/core'

const App = defineComponent({
  state() {
    return { count: 0 }
  },
  methods: {
    increment() { this.count++ }
  },
  template: `
    <div>
      <h1>Hello Lyt.js!</h1>
      <p>Count: {{ count }}</p>
      <button on:click="increment">+1</button>
    </div>
  `
})

createApp(App).mount('#app')

看起来是不是很熟悉？如果你用过 Vue，上手 Lyt.js 几乎零成本。

与主流框架的对比

特性Lyt.jsVue 3React 19Svelte 5Solid.js
运行时依赖00000
体积(gzip)~35KB~44KB~45KB~2KB~8KB
响应式Proxy+SignalProxyHooksRunesSignal
虚拟DOM可选是是否否
模板语法增强HTML增强HTMLJSX增强HTMLJSX
TypeScript原生TS原生TS原生TS原生TS原生TS

架构设计

Lyt.js 采用 Monorepo 架构，使用 pnpm workspace 管理 24 个包。核心包结构如下：

lytjs/
├── packages/
│   ├── core/          # 核心入口 (createApp, h)
│   ├── reactivity/    # 响应式系统 (Proxy + Signal)
│   ├── renderer/      # 渲染器 (DOM/SSR/Vapor)
│   ├── compiler/      # 编译器 (parse/transform/optimize/generate)
│   ├── component/     # 组件系统 (defineComponent)
│   ├── router/        # 路由
│   └── ...            # 其他包
├── docs/              # VitePress 文档站
└── scripts/           # 构建/发布脚本

构建工具链使用 esbuild，保证了极快的构建速度。编译器采用四阶段流水线设计：Parse → Transform → Optimize → Generate，支持 Patch Flags、Block Tree、Static Hoisting 和 LIS Diff 等优化策略。

总结

Lyt.js 是一个有野心也有实力的前端框架。它不追求大而全，而是聚焦于：

  • 零依赖的纯净架构
  • 双响应式的灵活选择
  • 增强模板的开发效率
  • 多渲染模式的场景覆盖

如果你正在寻找一个轻量、灵活、高性能的前端框架，或者你对 Vue 的模板语法情有独钟但又想要 Signal 级别的性能，Lyt.js 值得一试。

GitHub: github.com/idcu/lytjs | Gitee: gitee.com/lytjs/lytjs

欢迎 Star ★ 和 PR，一起打造更好的前端开发体验！

avatar
文章
阅读
粉丝