https://knightli.com/tags/svelte/ Recent content in Svelte on KnightLi的博客 Hugo -- gohugo.io zh-cn Sat, 06 Jun 2026 22:26:00 +0800 https://knightli.com/2026/06/06/svelte-frontend-framework-guide/ Sat, 06 Jun 2026 22:26:00 +0800 https://knightli.com/2026/06/06/svelte-frontend-framework-guide/ <p><code>sveltejs/svelte</code> 是一个编译型前端框架。它的口号是 “web development for the rest of us”，意思很清楚：让 Web 开发更少样板、更接近直接写 HTML、CSS 和 JavaScript。</p> <p>和 React、Vue 这类运行时框架相比，Svelte 的核心差异是编译。它在构建阶段把组件编译成更直接的 JavaScript，尽量减少运行时负担。</p> <h2 id="svelte-的特点">Svelte 的特点 </h2><p>Svelte 最吸引人的地方通常是：</p> <ul> <li>写法简洁，模板感少；</li> <li>响应式语法直接；</li> <li>组件文件结构清晰；</li> <li>编译期做更多工作；</li> <li>产物相对轻；</li> <li>学习曲线对普通前端更友好；</li> <li>配合 SvelteKit 可以做完整应用。</li> </ul> <p>它适合喜欢“少一点框架仪式感”的开发者。很多时候，你写出来的代码更像增强版 HTML，而不是一堆状态管理和 hooks 拼装。</p> <h2 id="适合哪些项目">适合哪些项目 </h2><p>Svelte 适合：</p> <ul> <li>交互型网站；</li> <li>小到中型 Web App；</li> <li>文档站和内容产品；</li> <li>数据可视化页面；</li> <li>需要轻量产物的前端项目；</li> <li>个人工具和独立开发产品。</li> </ul> <p>如果团队已经深度押注 React 生态，或者依赖大量 React 组件库，迁移成本要认真评估。Svelte 好用，不代表每个团队都应该换。</p> <h2 id="和-react--vue-的区别">和 React / Vue 的区别 </h2><p>可以粗略这样理解：</p> <table> <thead> <tr> <th>框架</th> <th>思路</th> </tr> </thead> <tbody> <tr> <td>React</td> <td>用 JavaScript 表达 UI，生态极大</td> </tr> <tr> <td>Vue</td> <td>模板、响应式和工程化平衡</td> </tr> <tr> <td>Svelte</td> <td>编译期消化框架复杂度，写法更轻</td> </tr> </tbody> </table> <p>Svelte 的爽感来自简洁，但生态规模、招聘供给、组件库成熟度仍然要按项目实际看。</p> <h2 id="小结">小结 </h2><p>Svelte 值得学，尤其适合想理解“编译型前端框架”思路的人。它不是 React 的全面替代品，而是一种更轻、更直接的前端开发路径。</p> <p>如果你做个人产品、交互页面或中小型应用，Svelte 会很舒服；如果是大型团队项目，就要把生态、人才和长期维护一起算进去。</p> <h2 id="参考来源">参考来源 </h2><ul> <li><a class="link" href="https://github.com/sveltejs/svelte" target="_blank" rel="noopener" >sveltejs/svelte - GitHub</a></li> </ul>