一、 为什么又要造一个轮子？
- 吐槽现状：现在的起始页插件动辄几十兆，甚至还要强制登录、推广告、后台偷偷下载资源，让浏览器启动变得越来越慢。
- 初心：我想要一个纯净、快到极致、数据掌握在自己手里的起始页。于是有了 NBtab 极简版。
二、 技术栈选型：轻量化的基础
- Vue 3 + Vite：利用 Vite 的按需加载和极快的构建速度。
- Tailwind CSS：利用其原子化 CSS 的特性，通过 PurgeCSS 自动剔除无用代码，让 CSS 产物几乎可以忽略不计。
- 原生 Web API：尽量不引入大型第三方库（如 Moment.js 等）
- 第三方组件按需引入
三、 极致优化的 3 个核心策略（技术干货区）
-
体积优化：如何压到 300KB？
- 图标方案：不使用完整的图标库字体，而是采用 SVG 按需引入，或者使用特定的图标组件库。
- 资源处理：图片资源全部经过 WebP 压缩，或者使用 CDN+本地占位图策略。
- Tree-shaking：展示你是如何在
vite.config.ts中配置混淆压缩和代码分割的。
-
内存管理：50MB 的秘密
- 响应式粒度控制：避免在大列表或背景切换时产生不必要的全量渲染。
- 生命周期销毁：及时销毁定时器、监听器，防止内存泄漏。
-
数据隐私：Local First
- 放弃云端同步，全部使用本地存储。支持导入导出
- 优势：零延迟读取，且数据永不离设备。
四、 UI 设计与兼容性
- 精致 UI：分享你是如何设计毛玻璃效果、动态壁纸切换的逻辑。
- 跨端兼容：通过一套响应式代码同时兼容 PC 扩展和手机端网页版。
五、 总结与自荐
- 做这个项目的初衷是自我需求驱动，希望能给同样追求极简的开发者一个新选择。
- 产品地址：[lite.nbtab.com/]
- 欢迎捉虫：如果有性能优化的建议，欢迎在评论区探讨。
