v3.2.0 已发布 Apache-2.0 开源 周下载 128k

面向现代 Web 的
前端技术开发平台

统一 CLI 工具链、跨框架组件库、构建加速引擎与线上诊断能力。 一套平台覆盖「脚手架 → 开发调试 → 构建优化 → 发布监控」全链路, 让团队只关心业务,不重复造工程轮子。

npm i -g @frontlab/cli
frontlab ~ dev RUNNING
$ frontlab dev --host

✔ 依赖分析完成        142 modules
✔ 本地服务已启动      http://localhost:5173
✔ 热更新通道就绪      HMR 12ms

────────────────────────────────
 bundle    412 KB   gzip 128 KB
 build     1.84 s   cold  3.10 s
 coverage  86.4%   lint  0 error
────────────────────────────────

⚠ src/pages/report.tsx 首屏依赖过多
  → 建议:import() 动态引入图表模块
构建提速 76%
包体积 -43%

六大核心能力,覆盖研发全链路

从本地开发到线上运维,平台化的能力组合,替代零散的工具拼装。

CLI 工具链

一条命令初始化项目、生成页面与组件模板、接入规范检查,团队脚手架版本统一可升级。

  • frontlab create
  • frontlab g page
  • frontlab lint --fix

组件库 UI Kit

180+ 跨框架基础组件,React / Vue / Svelte 三端同源,主题令牌一次配置全站生效。

  • 主题令牌 Theme Token
  • 无障碍 ARIA 内置
  • 按需引入 Tree-Shaking

构建加速引擎

基于增量编译与持久化缓存,二次构建进入毫秒级;产物自动分包、压缩与 CDN 指纹。

  • 增量编译
  • 持久化缓存
  • 产物体积分析

调试诊断

源码级报错定位、依赖冲突检测、内存泄漏追踪,开发环境即给出可执行的修复建议。

  • Source Map 反查
  • 依赖冲突检测
  • 内存快照对比

性能与监控

接入 Web Vitals 采集,LCP / INP / CLS 实时看板,异常与慢接口按页面归因。

  • Web Vitals 看板
  • 慢接口归因
  • 异常告警推送

微前端与 SSR

内置模块联邦与服务端渲染方案,老系统可按路由逐步迁移,无需一次性重写。

  • Module Federation
  • SSR / SSG 双模
  • 渐进式迁移

一条流水线,串起整个研发周期

每个阶段都有平台默认实现,也允许替换为团队既有工具。

01

脚手架

选择技术栈与规范预设,生成仓库骨架、CI 配置与代码规范。

02

本地开发

秒级启动、热更新、接口 mock,联调不阻塞后端进度。

03

质量门禁

提交即跑 lint、单测、类型检查与构建体积阈值校验。

04

构建产物

增量编译 + 智能分包 + 资源指纹,产物可追溯可回滚。

05

发布灰度

按流量 / 人群灰度发布,一键回滚到任一历史版本。

06

线上监控

性能指标与错误日志回流,异常自动关联到具体提交。

三分钟跑通第一个项目

下面是一份真实可用的最小工程结构,复制即可运行。

项目结构
  • my-app/
  • frontlab.config.ts构建与插件配置
  • src/
  • main.ts应用入口
  • App.tsx根组件
  • pages/
  • theme.json主题令牌
  • package.json
  • nginx.conf部署配置模板
import { defineConfig } from '@frontlab/cli';

export default defineConfig({
  framework: 'react',
  ssr: true,
  cdn: { enable: true, domain: 'https://cdn.example.com' },
  splitChunks: { vendor: true, maxSize: 244 },
  monitor:  { webVitals: true, dsn: 'https://api.example.com/report' }
});
import { createApp } from '@frontlab/runtime';
import App from './App';
import theme from './theme.json';

createApp(App, {
  theme: theme,
  plugins: [router, store, monitor]
}).mount('#app');
import { Button, Table, Chart } from '@frontlab/ui';

export default function App() {
  return (
    <Layout>
      <Header>数据看板</Header>
      <Chart type="line" data={pv} />
      <Button type="primary">导出报表</Button>
    </Layout>
  );
}

180+ 组件,开箱即用

统一的交互规范与主题令牌,替换品牌色即可完成整站换肤。

主题令牌 --color-primary --radius-md --space-4
服务状态构建耗时产物体积覆盖率
web-console运行中1.84s412 KB86.4%
admin-sdk运行中2.31s608 KB79.1%
legacy-portal构建中5.02s1.2 MB52.0%
docs-site失败———
周构建耗时趋势(秒)
冷构建增量构建
构建成功 产物已上传至 CDN,版本号 v3.2.0-a1f3c
体积告警 legacy-portal 超出阈值 244 KB,建议启用动态导入
构建失败 docs-site 第 42 行类型错误:Props 缺少 siteId
通过警告失败草稿

真实项目的构建数据对比

测试样本:62 个页面、约 3,400 个模块的中后台工程,Node 20 / 8 核 16G。

指标Webpack 5Vite 5FrontLab相对最优
冷启动构建48.2 s21.6 s9.8 s-55%
增量二次构建6.40 s1.20 s0.31 s-74%
产物体积(gzip)1.42 MB1.18 MB0.81 MB-31%
本地服务启动12.4 s0.9 s0.6 s-33%
HMR 热更新240 ms45 ms12 ms-73%
内存峰值3.1 GB1.4 GB0.9 GB-36%

数据来自内部基准仓库,不同项目结构会有差异,建议用 frontlab bench 在自己的工程上跑一遍。

与现有技术栈无缝集成

React 18Vue 3Svelte TypeScriptNode.jsVite WebpackTailwindNginx DockerK8sGitHub Actions GitLab CIJenkinsSentry

文档中心

从入门到源码贡献,文档与版本保持同步更新。

更新日志

每两周一个小版本,每季度一个稳定版,语义化版本严格遵循。

v3.2.0
2026-09-18
  • 新增容器查询(Container Query)适配支持
  • 优化增量缓存命中率提升至 94%
  • 修复SSR 水合阶段偶发的样式闪烁
v3.1.4
2026-09-02
  • 优化产物分包策略,首屏 JS 减少 18%
  • 修复Windows 下路径分隔符导致的缓存失效
v3.1.0
2026-08-15
  • 新增Web Vitals 监控面板与慢接口归因
  • 新增支持 Svelte 5 运行时
  • 变更最低 Node 版本提升至 18.18
v3.0.0
2026-06-28
  • 变更配置文件由 JS 迁移至 TypeScript
  • 新增模块联邦微前端方案
  • 优化CLI 启动耗时下降 40%

版本与许可

核心能力永久开源,团队协作与治理能力按需订阅。

社区版

免费

适合个人开发者与小型项目

  • 完整 CLI 与构建引擎
  • 180+ 基础组件
  • 社区论坛支持
  • 团队协作控制台
  • 私有化部署
立即使用
推荐

专业版

¥ 599 / 人 / 年

适合 20 人以内的研发团队

  • 含社区版全部能力
  • 团队协作控制台
  • 性能监控看板 90 天留存
  • 工单 8 小时响应
  • 私有化部署
申请试用

企业版

定制

适合有合规与私有化要求的组织

  • 含专业版全部能力
  • 私有化部署与内网源
  • 定制组件与规范沉淀
  • 专属技术支持 7×24
  • 架构评审与培训
联系商务

把工程规范沉淀成平台能力

留下联系方式,我们会提供一次针对现有工程的构建体检报告。

QQ:2736715645(开发技术) 邮箱:cccimg@qq.com 服务时间 14:00 - 21:00