0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

前端UI框架Svelte 4正式发布

OSC开源社区 来源:OSC开源社区 2023-06-25 15:44 次阅读

距离 Svelte 3 发布已经过去了四年多的时间,经过几个月的筹备,Svelte 4 稳定版本于近日正式发布。

Svelte 是一款类似 React、Vue 的前端 UI 框架。如名字所言, Svelte 的体积非常小,其作者 Rich Harris 表示,他设计 Svelte 的核心思想在于“通过静态编译减少框架运行时的代码量”。

1b97b5be-1277-11ee-962d-dac502259ad0.png

新版本 Svelte 4改进了性能、优化了开发者体验,并大改了网站。Svelte 4 主要是一个维护版本,它为下一代的 Svelte 发布奠定了基础。

1bb1f244-1277-11ee-962d-dac502259ad0.png

性能

这个版本使 hydration 代码更小更快。为了看到其影响,SvelteKit 用户可以通过检查
.svelte-kit/output/client/_app/immutable/nodes 文件夹来看到其编译后的输出尺寸缩小。

例如,在 kit.svelte.dev 上,整个网站生成的 JS 大小减少了 12.7%。

Svelte 4 将 Svelte 包的大小减少了近 75%,这意味着在 npm install 上的等待时间减少了。

对于第一次在 learn.svelte.dev 上加载交互式学习体验的用户、Svelte REPL 的用户以及网络条件有限的用户来说,这一改进将尤为明显。剩下的大部分软件包大小是对 eslint 的支持,这就需要发布一个 CJS 构建,一旦 eslint 重写完成,Svelte 的软件包大小可以再下降 50% 以上。

Svelte 中依赖的数量已经从 61 个大大减少到 16 个。这意味着用户下载速度更快,也更不容易受到供应链攻击的影响。

开发者体验

Svelte 4 使 Svelte 的创作体验更加直观和一致:|local 现在是转换的默认值,以避免动画阻碍页面转换,预处理程序现在更容易编写,多项修正使 CSP 更容易设置和使用。

对于 Web 组件的用户来说,最大的变化是对你使用 Svelte 编写自定义元素的方式进行了全面修改。通过改变它们的生成方式,可以消除了一大类错误和不一致的地方。

最后,还做了几项改进 IDE 编写的体验:“cmd + 点击” svelte 模块现在可以带你到实现,而不是.d.ts 文件。从 svelte/internal 导入的文件现在被隐藏,不会干扰自动补全建议,自动导入现在更可靠。

更新了网站、文档和教程

官方 svelte.dev 网站已经进行了大改。它现在被分割成多个页面,并改进了导航、更新了 TypeScript 文档、黑暗模式和增强的 REPL。

SvelteKit 网站也在进行更新,以与之匹配。还更新了所有的教程链接,以指向新的 learn.svelte.dev。旧的教程仍然适用于 Safari 16.3 及以前的用户。

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 网络
    +关注

    关注

    14

    文章

    7606

    浏览量

    89371
  • 框架
    +关注

    关注

    0

    文章

    403

    浏览量

    17560
  • 开发者
    +关注

    关注

    1

    文章

    594

    浏览量

    17119

原文标题:前端UI框架Svelte 4正式发布

文章出处:【微信号:OSC开源社区,微信公众号:OSC开源社区】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    大彩VisualTFT智能家居UI案例

                   一、适合范围                     适合全系列480*480大彩串口屏产品               二、UI展示         
    发表于 02-14 16:32 1次下载

    Galaxy S25系列发布:One UI 7带来创新功能

    三星电子在近期于美国加州圣何塞举办的“Galaxy Unpacked”发布会上,正式推出了其备受期待的旗舰手机——Galaxy S25系列。此次发布的新机型不仅延续了三星一贯的高品质和创新精神,更
    的头像 发表于 01-24 10:31 407次阅读

    热门前端框架:引领现代 Web 开发的潮流

    在当今快速发展的前端开发领域,热门前端框架如 React、Vue 和 Angular 等,成为了开发者构建高效、高性能 Web 应用的得力工具。它们各自具有独特的特点和优势,引领着现代 Web 开发
    的头像 发表于 01-22 10:08 122次阅读

    HarmonyOS开发指导类文档更新速递(上)

    伴随着HarmonyOS 5.0.0 Release版本的发布,HarmonyOS官网文档也带来了不少上新内容。本期HarmonyOS NEXT开发者资料直通车将从文档更新角度为开发者推荐应用框架
    的头像 发表于 12-30 09:50 235次阅读
    HarmonyOS开发指导类文档更新速递(上)

    自动化创建UI并解析数据

    到创建的控件。 待优化点: 1.协议内容较多时候配置文件编写较为繁琐; 2.创建UI时会存在失败的情况,导致“输入框.vi”无法关闭; 3.控件创建可能会漏缺,需要加判断; 4.程序运行时切换前面板
    发表于 12-10 08:41

    简述大前端技术栈的渲染原理

    应用开发:Android、iOS、鸿蒙(HarmonyOS)等; •Web前端框架:Vue、React、Angular等; •小程序开发:微信小程序、京东小程序、支付宝小程序等; •跨平台解决方案:React Native、Flutter、Taro、Weex等。 什么是渲
    的头像 发表于 11-07 10:11 314次阅读

    bootstrap框架和vue框架的区别

    Bootstrap和Vue都是目前非常流行的前端开发框架,它们各自具有独特的优势和特点。 设计理念 Bootstrap是一个基于HTML、CSS和JavaScript的前端开发框架,主
    的头像 发表于 07-11 09:55 1021次阅读

    bootstrap框架介绍

    Bootstrap是一个流行的前端框架,它提供了一套响应式、移动优先的CSS和JavaScript组件,可以帮助开发者快速构建美观、功能丰富的网页。 一、Bootstrap简介 1.1
    的头像 发表于 07-11 09:53 688次阅读

    bootstrap框架用什么软件开发

    。 Bootstrap框架概述 Bootstrap是由Twitter公司开发的一个开源前端框架,自2011年首次发布以来,已经成为全球最受欢迎的前端
    的头像 发表于 07-11 09:50 608次阅读

    使用 GPT4V+AI Agent 做自动 UI 测试的探索

    一、背景 从 Web 诞生之日起,UI 自动化就成了测试的难点,到现在近 30 年,一直没有有效的手段解决Web UI测试的问题,尽管发展了很多的 webdriver 驱动,图片 diff 驱动
    的头像 发表于 06-20 15:42 590次阅读
    使用 GPT<b class='flag-5'>4</b>V+AI Agent 做自动 <b class='flag-5'>UI</b> 测试的探索

    鸿蒙Ability Kit(程序框架服务)【UIAbility组件与UI的数据同步】

    基于当前的应用模型,可以通过以下几种方式来实现UIAbility组件与UI之间的数据同步。
    的头像 发表于 06-03 10:26 588次阅读
    鸿蒙Ability Kit(程序<b class='flag-5'>框架</b>服务)【UIAbility组件与<b class='flag-5'>UI</b>的数据同步】

    鸿蒙ArkUI:【从代码到UI显示的整体渲染流程】

    方舟开发框架(简称ArkUI)是鸿蒙开发的UI框架,提供如下两种开发范式,我们 **只学声明式开发范式**
    的头像 发表于 05-13 16:06 1057次阅读
    鸿蒙ArkUI:【从代码到<b class='flag-5'>UI</b>显示的整体渲染流程】

    鸿蒙OS开发实战:【自动化测试框架】使用指南

    为支撑HarmonyOS操作系统的自动化测试活动开展,我们提供了支持JS/TS语言的单元及UI测试框架,支持开发者针对应用接口进行单元测试,并且可基于UI操作进行UI自动化脚本的编写。
    的头像 发表于 04-08 14:49 1595次阅读
    鸿蒙OS开发实战:【自动化测试<b class='flag-5'>框架</b>】使用指南

    什么是模拟前端芯片技术 数字前端和模拟前端的区别

    什么是模拟前端芯片技术 模拟前端芯片技术是一种涉及电子元件的技术,其核心在于模拟前端芯片(AFE芯片)的设计和应用。模拟前端芯片位于信号处理链的最
    的头像 发表于 03-15 17:58 1956次阅读

    微软发布Agent框架UFO,引领UI交互新纪元

    微软近日宣布推出全新的Agent框架——UFO(UI-Focused Agent),旨在构建更智能、更直观的用户界面交互体验。该框架基于OpenAI的GPT-4V图像识别模型开发,专为
    的头像 发表于 02-19 11:15 1318次阅读