大家好，我是Echa。

最近有不少的粉丝们私信我，作为前端程序员学什么框架比较好？当前最流行的前端框架有哪些？各大企业前端岗位需要哪方面的人才？作为资深全栈工程师的小编，这条程序员道路上走来，每个时间段市场需求不一样，所需技能和前端框架都有所不同，但是只要满足老板们实际需求，能落地实现都是好框架，好技术。但是最近前端技术新框架，新技术更新太快，几乎每三个月就有新知识新技术出现，学无止境。但还是建议粉丝们选择了前端程序员这条路，坚持每天学习一个知识点，每周快速看完一本书，把基础打牢，我相信在程序员这条路上前途光明并且宽阔。今天小编给粉丝们盘点28个前端里程碑式的Github开源项目，咱们一起回顾前端程序员的过去，由于小编知识面有限，个人知识累计汇总，如果有哪些里程碑梳理不对的，请多多指点。

创作不易，喜欢的老铁们加个关注，点个赞，后面会持续更新干货，速速收藏，谢谢！你们的一个小小举动就是对小编的认可，更是创作的动力。

全文大纲

1. jQuery- 由 John Resig 创建并于 2006 年发布，在 Ajax 框架与 Prototype.js，Dojo 或 YUI 之类的库的争夺中胜出。
2. Node.js - 2009年5月由 Ryan Dahl 在 JavaScript V8 引擎之上创建的 Node.js 将 JavaScript 带到了服务器端
3. Express - 2009 年 6 月，Express 几乎与 Node.js 一样古老，但仍被认为是 Node.js 的标准 Web 框架。
4. D3 - 2010 年 9 月Mike Bostok 创建的经典数据可视化库在将近 10 年后仍然有用。
5. Angular - 2010 年 1 月来自 Google 的 Angular 通过提供可在浏览器中运行的完整框架，开始颠覆开发人员构建应用程序的方式
6. ember.js - 2011 年 5 月一个 UI框架，该框架倾向于使用强约定以使 Web 开发人员更加高效。
7. Bootstrap - 2011 年 7 月Bootstrap 由 Twitter 在 2011 年开源，是一组 JavaScript 和 CSS 元素，用于向网页添加常见的小部件。
8. Webpack - 2012 年 3 月Webpack 是前端工具的关键部分，它能够从任何种类的资产生成 JavaScript 捆绑包。
9. TypeScript - 2012 年 10 月为 JavaScript 提供静态类型安全性的 JavaScript 的超集。
10. electron - 2013 年 4 月使用 Web 技术构建桌面应用程序的解决方案。
11. React - 2013 年 5 月React 由 Facebook 开源，以创建动态，快速的 UI。
12. Vue.js - 2013 年 7 月Vue.js 在 React 之后仅两个月发布，采用了另一种方法来处理反应性。
13. babel - 2014 年 9 月最初称为 6 to 5 的编译器 Babel 帮助使 JavaScript 的 ES6 版本流行，这是 React 成功的关键部分。
14. react-native - 2015 年 1 月利用 React Native，开发人员可以利用对 React 框架的了解，为 iOS 或 Android 构建移动应用程序。
15. VsCode - 2015 年 9 月基于 Electron 的最流行的 IDE，用于编码 JavaScript 和 TypeScript 应用程序。
16. next.js - 2016 年 10 月成为最受欢迎的框架，用于构建全栈 JavaScript 应用程序（在前端和后端均运行的应用程序）。
17. puppeteer -2017 年 5 月一个 Node.js 库，用于控制无头 Chrome 浏览器执行诸如浏览器测试或 Web 抓取之类的操作。
18. deno - 2018 年 5 月Node.js 发行 9 年后，Ryan Dahl 再次采用新的服务器端 JavaScript 运行时。
19. Sveltejs -2018年4月前端领域风起云涌，框架层出不穷，前端三大马车 React、Vue、Angular 始终稳居前三甲。同时我们也注意到在众多前端框架中，由 Rich Harris (Ractive, Rollup 和 Bubble 的作者) 开发的 Svelte 有望成为一批黑马，在前端框架中脱颖而出。
20. SolidJS-框架由Ryan Carniato创建并于 2018 年开源,但最近凭借其“细粒度反应性”的卖点获得了一些人气。
21. snowpack - 2019 年 2 月一种构建工具，可利用有关 JavaScript 模块的最新更改来提供出色的开发人员体验。
22. Vite -2019 年Vite 下一代前端工具.
23. qiankun（乾坤）-2019年8月是由蚂蚁金服推出的基于Single-Spa实现的前端微服务框架，本质上还是路由分发式的服务框架，不同于原本 Single-Spa 采用 JS Entry 加载子应用的方案，qiankun 采用 HTML Entry 方式进行了替代优化。
24. Rome - 2020 年 2 月Rome 由 Seb McKenzie 创建，旨在提供一个依赖项来处理所有前端工具（皮棉，测试，构建...）。
25. Alpine.js - 2020年6月Alpine创造者Caleb Poizio称Alpine.js提供了“疯狂的小尺寸功能，无需安装NPM”。
26. Corepack-2021年9月发布，是一个处于实验阶段的工具，用于助你管理你本机 package manager 的版本。也就是用来管理「包管理工具（npm、yarn、pnpm、cnpm）」，即「包管理器的管理器」。
27. Pinia - 2021年11月24日正式成为 vuejs 的一员。
28. SvelteKit -2022年12月14日发布，包括服务器端渲染 (SSR)、路由、针对 JS 和 CSS 的代码分割，以及针对不同 Serverless 平台生成不同代码的适配器等功能。

jQuery

官方网址：https://jquery.com/

Github（57k）：https://github.com/jquery/jquery

jQuery 由 John Resig 创建并于 2006 年发布，在 Ajax 框架与 Prototype.js，Dojo 或 YUI 之类的库的争夺中胜出。

成为几乎所有网页中都包含的事实上的标准库，即使在今天。

一个源于广阔的“插件”生态系统的精美软件。

提供统一的 API 来处理浏览器不一致的工作非常出色。

如下图：

Node.js

官方网址：https://nodejs.org/

Github（92.3k）：https://github.com/nodejs/node

Node.js-2009 年 5 月由 Ryan Dahl 在 JavaScript V8 引擎之上创建的 Node.js 将 JavaScript 带到了服务器端。

强大的 API，命令行工具，IoT 设备和所有现代 Web 开发工具。

如下图：

Express

官方网址：https://expressjs.com/

Github（59.4k）：https://github.com/expressjs/express

2009 年 6 月Express 几乎与 Node.js 一样古老，但仍被认为是 Node.js 的标准 Web 框架。由于其极简的方法，因此拥有深厚的中间件生态系统。

更现代的替代方法包括Nest，Fastify或Next.js。

如下图：

D3

官方网址：https://d3js.org/

Github（104k）：https://github.com/d3/d3

d3js-2010 年 9 月Mike Bostok 创建的经典数据可视化库在将近 10 年后仍然有用。许多图表库都建立在其强大的原语之上。

d3js是一个JavaScript库，用于使用web标准可视化数据。D3帮助您使用SVG、画布和HTML将数据带入生活。D3将强大的可视化和交互技术与数据驱动的DOM操作方法相结合，为您提供现代浏览器的全部功能，并为您的数据设计正确的可视化界面。

如下图：

Angular

官方网址：https://angularjs.org/

Github（59.3k）：https://github.com/angular/angular.js

2010 年 1 月。来自 Google 的 Angular 通过提供可在浏览器中运行的完整框架，开始颠覆开发人员构建应用程序的方式。

它没有增强服务器生成的 DOM，而是将页面的控制移至客户端，从而进入了“单页面应用程序”时代。

Angular 2 在 2014 年作为一个单独的项目发布。

Angular JS (Angular.JS) 是一组用来开发 Web 页面的框架、模板以及数据绑定和丰富 UI 组件。它支持整个开发进程，提供 Web 应用的架构，无需进行手工 DOM 操作。 AngularJS 很小，只有 60K，兼容主流浏览器，与 jQuery 配合良好。

如下图：

ember.js

官方网址：https://emberjs.com/

Github（22.4k）：https://github.com/emberjs/ember.js

2011 年 5 月一个 UI框架，该框架倾向于使用强约定以使 Web 开发人员更加高效。

在 JavaScript 的现代化过程中发挥了重要作用。

Ember.js是一个开源的JavaScript客户端框架，用于开发Web应用程序并使用MVC（模型 - 视图 - 控制器）架构模式。在Ember.js中，路由用作模型，句柄模板作为视图，控制器处理模型中的数据。

如下图：

Bootstrap

官方网址：https://getbootstrap.com/

Github（161k）：https://github.com/twbs/bootstrap

2011 年 7 月 Bootstrap 由 Twitter 在 2011 年开源，是一组 JavaScript 和 CSS 元素，用于向网页添加常见的小部件。

得益于整洁的文档，一致的开发人员体验和灵巧设计的响应式设计功能，它闪闪发光。

当开发人员在智能手机上浏览网页时，已帮助开发人员使网页适合移动设备浏览。

使用 Bootstrap 构建快速、响应式布局的网站。强大、可扩展、功能丰富的前端开发工具包。它提供的功能包括：基于 Sass 进行编译和定制、内置的网格系统和组件、强大的 JavaScript 插件等。

如下图：

Webpack

官方网址：https://webpack.js.org/

Github（62.2k）：https://github.com/webpack/webpack

2012 年 3 月Webpack 是前端工具的关键部分，它能够从任何种类的资产生成 JavaScript 捆绑包。

第五版主要版本将于 2020 年仍在 Create React App 或 Next.js 等项目中使用，即将推出。

包裹和汇总是最受欢迎的两种。

webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle

如下图：

TypeScript

官方网址：https://www.typescriptlang.org/

Github（87.1k）：https://github.com/microsoft/TypeScript

2012 年 10 月 为 JavaScript 提供静态类型安全性的 JavaScript 的超集。

赢得了转译者与竞争对手 Flow 的战斗，几乎成为前端和后端开发的标准。

DefinitelyTyped 项目为 7000 多个软件包提供了其他类型！

如下图：

electron

官方网址：https://electronjs.org/

Github（105k）：https://github.com/electron/electron

2013 年 4 月使用 Web 技术构建桌面应用程序的解决方案。

由流行的桌面应用程序使用，例如 VS Code，Slack ...

Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台的桌面应用程序。它基于 Node.js 和 Chromium，被 Atom 编辑器和许多其他应用程序使用。

Electron 兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序。

如下图：

React

官方网址：https://reactjs.org/

Github（200k）：https://github.com/facebook/react

2013 年 5 月 React 由 Facebook 开源，以创建动态，快速的 UI。

不是像 Angular 这样的完整框架，因为它仅处理视图层。

它的组件方法和 JSX 语法变得非常流行，并启发了许多项目。

React 特点

• 1.声明式设计 −React采用声明范式，可以轻松描述应用。
• 2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
• 3.灵活 −React可以与已知的库或框架很好地配合。
• 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
• 5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
• 6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

如下图：

Vue.js

官方网址：http://v2.vuejs.org/

Github（201k）：https://github.com/vuejs/vue

2013 年 7 月 Vue.js 在 React 之后仅两个月发布，采用了另一种方法来处理反应性。

通常被认为对初学者更友好。

没有像 React 与 Facebook 或 Angular 与 Google 这样的大型公司的支持，而是由 Evan You 创建的。

强大的社区，尤其是在中国。

版本 3 提供了巨大的改进，包括更好的 TypeScript 支持和 Composition API。

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

如下图：

babel

官方网址：https://babel.dev/

Github（41.7k）：https://github.com/babel/babel

2014 年 9 月最初称为 6 to 5 的编译器 Babel 帮助使 JavaScript 的 ES6 版本流行，这是 React 成功的关键部分。

让开发人员使用 JavaScript 的最新功能编写代码，而不必担心浏览器的支持。

作为许多项目的依赖项包括在内。

Babel 是编写下一代 JavaScript 的编译器。

ES2015 and beyond。Babel 默认使用一组 ES2015 语法转换器，允许你使用新的语法，无需等待浏览器支持。

JSX and React。Babel 内置支持 JSX，与 babel-sublime 包一起结合，将语法高亮功能带到一个新的高度。

Pluggable。Babel 支持用户插件。允许你插入强大的 Babel 转换层。

主要特性

• 支持 ES2015+
• 支持 JSX 和 React
• 支持用户插件

如下图：

react-native

官方网址：https://reactnative.dev/

Github（107k）：https://github.com/facebook/react-native

2015 年 1 月利用 React Native，开发人员可以利用对 React 框架的了解，为 iOS 或 Android 构建移动应用程序。

React Native 将原生开发的最佳部分与 React 相结合， 致力于成为构建用户界面的顶尖 JavaScript 框架。

酌量添加，多少随意。随时都可以把 React Native 无缝集成到你已有的 Android 或 iOS 项目，当然也可以完全从头焕然一新地重写。

如下图：

VsCode

官方网址：https://code.visualstudio.com/

Github（141k）：https://github.com/microsoft/vscode

2015 年 9 月基于 Electron 的最流行的 IDE，用于编码 JavaScript 和 TypeScript 应用程序。

GitHub 上的 Atom 于 2012 年推出，它是该概念的先驱：使用 Web 技术构建的代码编辑器，可通过安装插件进行扩展。

凭借其 TypeScript 支持而发光……这两个项目均来自 Microsoft。

VSCode（全称：Visual Studio Code）是一款由微软开发且跨平台的免费源代码编辑器，可选择Windows、Linux、macOS的不同系统对应安装。该软件支持语法高亮、代码自动补全、代码重构、查看定义功能，并且内置了命令行工具和 Git 版本控制系统。用户可以更改主题和键盘快捷方式实现个性化设置，也可以通过内置的扩展程序商店安装扩展以拓展软件功能，VSCode 使用 Monaco Editor 作为其底层的代码编辑器。

VSCode 默认支持多种编程语言，包括 JavaScript、TypeScript、CSS 和 HTML；也可以通过下载扩展支持 Python、C/C++、Java 和 Go 在内的其他语言，对于部分语言可以使用 IntelliSense。它也支持调试 Node.js 程序，和 GitHub 的 Atom一样，VSCode 也基于 Electron 框架构建。它还支持同时打开多个目录，并将信息保存在工作区中以便复用，允许用户更改文件的代码页、换行符和编程语言等。

如下图：

next.js

官方网址：https://nextjs.org/

Github（98.1k）：https://github.com/vercel/next.js

2016 年 10 月成为最受欢迎的框架，用于构建全栈 JavaScript 应用程序（在前端和后端均运行的应用程序）。

在前端使用 React，并提供服务器端渲染功能，以提供最佳的用户体验。

Next.js的一些特性：

• 支持两种预渲染方式, 静态生成SSG和服务器端渲染SSR.
• 基于页面的路由系统, 路由零配置
• 自动代码拆分. 优化页面加载速度.
• 支持静态导出, 可将应用导出为静态网站.
• 内置 CSS-in-JS 库 styled-jsx
• 方案成熟, 可用于生产环境, 世界许多公司都在使用
• 应用部署简单, 拥有专属部署环境 Vercel, 也可以部署在其他环境

如下图：

puppeteer

官方网址：https://pptr.dev/

Github（81.3k）：https://github.com/puppeteer/puppeteer

2017 年 5 月一个 Node.js 库，用于控制无头 Chrome 浏览器执行诸如浏览器测试或 Web 抓取之类的操作。

Puppeteer是NPM库，它提供了NodeJS高级API来控制Chrome。Puppeteer 默认以无头（无界面）方式运行，但也可以配置为运行有界面的Chrome。

Puppeteer 提供了一系列 API，通过 Chrome DevTools Protocol 协议控制 Chromium/Chrome 浏览器的行为

如下图：

deno

官方网址：https://deno.land/

Github（87k）：https://github.com/denoland/deno

2018 年 5 月Node.js 发行 9 年后，Ryan Dahl 再次采用新的服务器端 JavaScript 运行时。旨在解决与 Node.js 相关的几个问题。

没有集中的程序包管理器，可以从任何 URL 加载任何 JavaScript 依赖项。

2020 年最受欢迎的项目之一。

Deno 是一个 JavaScript/TypeScript 的运行时，默认使用安全环境执行代码，有着卓越的开发体验。

Deno 含有以下功能亮点：

• 默认安全。外部代码没有文件系统、网络、环境的访问权限，除非显式开启。
• 支持开箱即用的 TypeScript 的环境。
• 只分发一个独立的可执行文件（deno）。
• 有着内建的工具箱，比如一个依赖信息查看器（deno info）和一个代码格式化工具（deno fmt）。
• 有一组经过审计的标准模块，保证能在 Deno 上工作。
• 脚本代码能被打包为一个单独的 JavaScript 文件。

Deno 是一个跨平台的运行时，即基于 Google V8 引擎的运行时环境，该运行时环境是使用 Rust 语言开发的，并使用 Tokio 库来构建事件循环系统。Deno 建立在 V8、Rust 和 Tokio 的基础上，它的架构如下：

如下图：

Sveltejs

官方网址：https://svelte.dev/

Github（64.2k）：https://github.com/sveltejs/svelte

Sveltejs -2018年4月前端领域风起云涌，框架层出不穷，前端三大马车 React、Vue、Angular 始终稳居前三甲。同时我们也注意到在众多前端框架中，由 Rich Harris (Ractive, Rollup 和 Bubble 的作者) 开发的 Svelte 有望成为一批黑马，在前端框架中脱颖而出。

Svelte是一种全新的构建用户界面的方法。传统框架React和Vue在浏览器中需要做大量的工作，而Svelte将这些工走放到构建应用程序的编译阶段来处理。

与使用虚拟DOM差异对比不同。Svelte编写的代码在应用程序的状态更改时就能像外科手术一样更新DOM。

减少代码量

重复利用你所掌握的编程语言-HTML、CSS和JavaScript，构建的组件无需依赖模板文件。

无虚拟DOM

Svelte将你的代码编译成体积小、不依赖框架的普通JS代码，让你的应用程序无论启动开始运行都变得迅速。

真正的反应能力

无需复杂的状态管理库，Svelte为JavaScript自身添加反应能力。

如下图：

SolidJS

官方网址：https://svelte.dev/

Github（24.3k）：https://github.com/solidjs/solid

Solid 是一个由公共贡献者团队支持的开源项目。Solid在MIT license下分发。是一个由公共贡献者团队支持的开源项目。Solid库和社区由核心团队和贡献者创作。

SolidJs 一个用于构建用户界面，简单高效、性能卓越的JavaScript库。

• 性能-始终在UI速度和内存利用率基准测试中名列前茅
• 强大-可组合的响应式原语与 JSX 的灵活性相结合。
• 实用-合理且量身定制的 API 使开发变得有趣而简单。
• 生产力-人体工程化设计和熟悉程度使得构建简单或复杂的东西变得轻而易举。

如下图：

snowpack

官方网址：https://www.snowpack.dev/

Github（19.7k）：https://github.com/snowpackjs/snowpack

2019 年 2 月snowpack 一种构建工具，可利用有关 JavaScript 模块的最新更改来提供出色的开发人员体验。

snowpack 核心特征：

• 开发模式启动仅需 50ms 甚至更少。
• 热更新速度非常快。
• 构建时可以结合任何 bundler，比如 webpack。
• 内置支持 TS、JSX、CSS Modules 等。
• 支持自定义构建脚本以及三方插件。

如下图：

Vite

官方网址：http://vitejs.dev/

Github（50.8k）：https://github.com/vitejs/vite

2020 年 Vite 下一代前端工具

Vite 是 Vue 的作者尤雨溪开发的 Web 开发构建工具，它是一个基于浏览器原生 ES 模块导入的开发服务器，在开发环境下，利用浏览器去解析 import，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随启随用。同时不仅对 Vue 文件提供了支持，还支持热更新，而且热更新的速度不会随着模块增多而变慢。在生产环境下使用 Rollup 打包。

• 即时服务器启动
• ⚡️ 快如闪电的 HMR
• ️ 丰富的功能
• 优化的构建
• 通用插件接口
• 全类型 API

这将是 2021 年的成功项目吗？还将有待时间验证！

Vite在法语中意为快速的，它是一种新型的前端构建工具，能够明显提升前端开发体验，主要由两部分构成：

• 一个开发服务器，基于原生ES模块提供了丰富的内建功能，比如速度极快的热更新HMR
• 一套构建指令，使用Rollup打包代码，并且是预配置的，可以输出用于生产环境的高度优化过的静态资源。

Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。

如下图：

qiankun

官方网址：https://qiankun.umijs.org/zh

Github（13.8k）：https://github.com/umijs/qiankun

qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。

qiankun 孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台，在经过一批线上应用的充分检验及打磨后，我们将其微前端内核抽取出来并开源，希望能同时帮助社区有类似需求的系统更方便的构建自己的微前端系统，同时也希望通过社区的帮助将 qiankun 打磨的更加成熟完善。

目前 qiankun 已在蚂蚁内部服务了超过 2000+ 线上应用，在易用性及完备性上，绝对是值得信赖的。

如下图：

Rome

官方网址：https://docs.rome.tools/

Github（21.9k）：https://github.com/rome/tools

2020 年 2 月Rome 由 Seb McKenzie 创建，旨在提供一个依赖项来处理所有前端工具（皮棉，测试，构建...）。

这个冒似还不是非常出名，这将是 2020 年的成功项目吗？还将有待时间验证！

如下图：

Alpine.js

官方网址：https://alpinejs.dev/

Github（22.5k）：https://github.com/alpinejs/alpine

2020年6月Alpine创造者Caleb Poizio称Alpine.js提供了“疯狂的小尺寸功能，无需安装NPM”。

Alpine.js 通过很低的成本提供了与 Vue 或 React 这类大型框架相近的响应式和声明式特性。

你可以继续操作 DOM，并在需要的时候使用 Alpine.js。

可以理解为 JavaScript 版本的 Tailwind。

如下图：

Corepack

Github（1.2k）：https://github.com/nodejs/corepack

Node.js 默认提供 npm 包管理器，Corepack 为您提供 Yarn 和 pnpm，而无需安装它们。

提出问题

Node.js 除了本身自带的 npm 包管理器，还有很有多的包管理器，比如 Yarn 和 pnpm 等等，不过上面三个是最最流行的方案。

参与不同项目，尤其是为开源项目贡献代码，会遇到两个问题：

• 代码都拉下来了结果发现还要安装对应的包管理器，等下载下来贡献代码的热情都没了。
• 项目是 pnpm 的项目却使用了 npm 来安装。
• 项目使用 pnpm 的版本不低于 v7.1.5 开发，自己的版本却是 v6.32.22。
• Node.js Corepack 就是为了解决上面问题的。

如下图：

Pinia

官方网址：https://pinia.vuejs.org/

Github（9.5k）：https://github.com/vuejs/pinia

• pinia 是由 vue 团队开发的，适用于 vue2 和 vue3 的状态管理库。
• 与 vue2 和 vue3 配套的状态管理库为 vuex3 和 vuex4，pinia被誉为 vuex5。
• pinia 没有命名空间模块；
• pinia 无需动态添加（底层通过 getCurrentInstance 获取当前 vue 实例进行关联）；
• pinia 是平面结构（利于解构），没有嵌套，可以任意交叉组合。

如下图：

SvelteKit

官方网址：https://kit.svelte.dev/

Github（12.2k）：https://github.com/sveltejs/kit

SvelteKit 经过两年的开发，SvelteKit 1.0 已正式发布，现在可用于生产环境。

SvelteKit 是一个用 Svelte 构建 Web 应用程序的框架，满足不同规模的应用开发，提供一个非常灵活和良好体验的基于文件系统的路由架构。Svelte 是一个 UI 组件框架，因其出色的性能和易用性而受到开发者喜爱。

SvelteKit 包括服务器端渲染 (SSR)、路由、针对 JS 和 CSS 的代码分割，以及针对不同 Serverless 平台生成不同代码的适配器等功能。

与目前部分主流的 Web 框架不同，SvelteKit 具有以下特点：

与传统的 “多页应用程序” 或 MPA 框架不同，它在初始服务器渲染的页面加载后默认为客户端导航。这可以实现更快的页面转换、页面之间持续存在的状态（例如侧边栏的滚动位置）以及更少的数据使用。它还避免在每次页面加载时重新运行第三方脚本，如分析脚本。

与传统的服务器框架不同，它允许开发者使用一种语言，而不是拥有两个紧密耦合的应用程序（一个用于生成 HTML，一个用于处理客户端交互）。由于 SvelteKit 在 JavaScript 运行的任何地方运行，开发者可以将对应的应用程序部署为传统的节点服务器，或使用 serverless 功能 —— 包括边缘。

与静态站点生成器不同，开发者可以使用个性化或动态数据构建应用程序，而不会在页面加载后从浏览器中获取数据，从而降低性能、改变布局。

详情查看发布公告和迁移指南。

团队表示，SvelteKit 1.0 是一个开始。虽然它已准备好用于生产环境，但对他们来说这只是刚刚开始。目前计划的路线图包括内置 i18n 支持、增量静态重新生成、对部署区域和运行时的精细控制、图像优化以及许多其他改进。

如下图：