0
点赞
收藏
分享

微信扫一扫

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


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

前言

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

🐶 狗头保命

Vue3

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

​​传送门​​

特点

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

祖师爷的新作,往死学就完事了!

Preact

新一代前端应该使用的“开发套餐“_开发语言_03

​​传送门​​

特点

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

lit

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

​​传送门​​

特点

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

svelte

新一代前端应该使用的“开发套餐“_开发语言_05

​​传送门​​

特点

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

Vite

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

​​传送门​​

特点

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

Vites

新一代前端应该使用的“开发套餐“_应用程序_07

​​传送门​​

特点

  • 与​​ 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

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

​​传送门​​

特点

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

Pinia

新一代前端应该使用的“开发套餐“_应用程序_09

​​传送门​​

特点

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

PNPM

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

​​传送门​​

特点

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

Formily

新一代前端应该使用的“开发套餐“_开发语言_11

​​传送门​​

特点

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

Prettier

新一代前端应该使用的“开发套餐“_应用程序_12

​​传送门​​

特点

  • 支持以下语法
  • 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、开发者颜色值转换工具   推荐:★★★★★

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


举报

相关推荐

0 条评论