新一代前端应该使用的“开发套餐“

前言

众所周知，前端界，框架库一直处在学不过来，大佬们还一直在开发的 黄金时代（卷王时代，bushi），在这个大卷王时代，我们有必要浅浅了解下这些新果实，不做上个时代的残党！

🐶 狗头保命

Vue3

传送门

特点

• 更好的 ts 支持
• 更方便的语法糖
• setup 组合API，提高封装逻辑代码，提高复用
• 体积更小，按需编译体积比 vue2.x 要更小
• 通过Proxy实现的更灵活 响应式系统！
• 更快的diff算法
  Vue3 重大变化详情

祖师爷的新作，往死学就完事了！

Preact

传送门

特点

• 最快的虚拟 DOM 库之一
• 体积很小只有3kb
• 可以无缝衔接React生态系统中组件

lit

传送门

特点

• 用于构建快速、轻量级的 Web 组件
• Lit 组件可以跨多个应用程序和站点使用
• 使用声明式模板
• HTML 标签增强拓展，可以像使用内置 HTML 元素一样使用组件
• 支持响应式
• 支持ts
• 大小约为 5 KB

svelte

传送门

特点

• 没有虚拟DOM
• 在构建时将您的应用程序转换为理想的 JavaScript，而不是在运行时解释您的应用程序代码
• 支持响应式
• 支持声明式模板开发
• 提高首页面加载速度

Vite

传送门

特点

• 使用原生 ESM 文件，无需打包!
• 使用esbuild构建依赖
• 对 TypeScript、JSX、CSS 等支持开箱即用
• 通过浏览器请求源码时进行转换并按需提供源码，实现冷启动

Vites

传送门

特点

• 与 Vite 通用的配置、转换器、解析器和插件。
• 使用你的应用程序中的相同配置来进行测试！
• 智能文件监听模式，就像是测试的 HMR！
• 支持测试 Vue、React、Lit 等框架中的组件。
• 开箱即用的 TypeScript / JSX 支持
• ESM 优先，支持模块顶级 await
• 通过 tinypool 使用 Worker 线程尽可能多地并发运行
• 套件和测试的过滤、超时、并发配置
• Jest 的快照功能
• 内置 Chai 进行断言 + 与 Jest expect 语法兼容的 API
• 内置用于对象模拟(Mock)的 Tinyspy
• 使用 jsdom 或 happy-dom 用于 DOM 模拟
• 通过 c8 来输出代码测试覆盖率
• 类似于 Rust 语言的 源码内联测试

VitePress

传送门

特点

• 使用真正的 SSG + SPA 架构
• 基于Vite 构建
• 利用 Vue 3 改进的模板静态分析对静态内容进行字符串化，降低js负载成本
• VitePress 旨在缩减当前 VuePress 的复杂性

Pinia

传送门

特点

• 大小约 1kb
• dev-tools 支持
  • 跟踪动作、突变的时间线
  • Store 出现在使用它们的组件中
  • time travel 和 更容易的调试
• 热模块更换
  • 在不重新加载页面的情况下修改您的 Store
  • 在开发时保持任何现有状态
• 插件：使用插件扩展 Pinia 功能
• 为 JS 用户提供适当的 TypeScript 支持或 autocompletion
• 服务器端渲染支持
• Vue2、Vue3 都可使用

PNPM

传送门

特点

• 创建的 node_modules 默认并非扁平结构，因此代码无法对任意软件包进行访问
• 不同项目相同依赖采用硬链接方式，节省磁盘空间
• 比同类工具速度的快将近 2 倍
• 命令和npm大部分相同，方便快速上手

Formily

传送门

特点

• 联动逻辑实现高效
• 跨端能力，逻辑可跨框架，跨终端复用
• 动态渲染能力

Prettier

传送门

特点

• 支持以下语法
  • JavaScript
  • JSX
  • Angular
  • Vue
  • Flow
  • TypeScript
  • CSS, Less, and SCSS
  • HTML
  • Ember/Handlebars
  • JSON
  • GraphQL
  • Markdown, including GFM and MDX
  • YAML
• 将代码解析成AST，再结合内置的一些规则，还原格式化后的代码
• 简洁的配置
• 集成多数的编辑器

 总结给大家推荐一个实用面试题库

 1、前端面试题库 （面试必备）            推荐：★★★★★

地址：前端面试题库

2、前端技术导航大全      推荐：★★★★★

地址：前端技术导航大全

3、开发者颜色值转换工具   推荐：★★★★★

地址 ：开发者颜色值转换工具