Svelte 4中的新功能：性能提升和简化的开发
#javascript #网络开发人员 #news #svelte

6月22日，Svelte具有announced its new major release。

即使将其视为“主要是为了为这些未来的改进树立基础”，它也带来了其一些展示网站的改进。

如果您比读者更多的听众，则此版本也已在Svelte Radio Live

上记录

表中的内容

性能增强

ð大幅减少了Svelte包装

对于此版本，Svelte肯定会减轻体重！

Svelte的整体大小从10.6 MB降至2.8MB ，几乎降低了75％的尺寸。

由于其依赖关系从61下降到16 ，也减少了运行Svelte所需的其他软件包，还减少了Sveltekit的依赖性数量。

这种减少带来了一些不错的副作用，例如更快的复制体验，交互式网站上更快的体验以及更快的npm install执行（您可能正在使用的任何软件包管理器）。

在此版本起，Svelte肯定是！

ð�改善水合

与包装大小的下降在一起，Svelte还减轻了它为水合生成的代码。

为例，为the SvelteKit website生成的代码已从126.3 kb减少到110.2 kb，几乎13％。

改善了开发人员的经验

ð过渡范围

默认情况下的过渡现在是本地的。

这会防止他们默认情况下全局，因此有可能干扰他人的风险，从而导致您在页面加载期间的过渡碰撞。

ð§±Web组件创作

在Svelte中创建Web组件非常容易：

<svelte:options tag="my-component" />

但是，它也限制了更高级的情况，例如控制是否反映更新的道具值回到DOM，禁用了影子DOM等。

svelte 4通过将其配置转换为svelte:options的专用customElement属性，使Web组件方式的创作经验更加顺畅。

此属性采用a number of options，可帮助您配置Web组件：

<svelte:options
  customElement={{
    tag: 'custom-element',
    shadow: 'none',
    props: {
      name: {
        <!-- 👇 Reflects the updated value back to the DOM -->
        reflect: true,
        <!-- 👇 Reflects the value as a number -->
        type: 'Number',
        <!-- 👇 Name of the attribute -->
        attribute: 'element-index'
      }
    }
  }}
/>

<script>
  export let elementIndex;
</script>

...

ð€trigter类型

更严格的类型现在是enforced for koude3, koude4, koude5 and koude6：

  • createEventDispatcher现在寻找有关其类型和数字的正确性的正确性，并引发关联的错误： 
import { createEventDispatcher } from 'svelte';

const dispatch = createEventDispatcher<{
  optional: number | null;
  required: string;
  noArgument: never;
}>();

// Svelte version 3:
dispatch('optional');
dispatch('required'); // Detail argument still omitted
dispatch('noArgument', 'surprise'); // Detail argument still provided

// Svelte version 4 using TypeScript strict mode:
dispatch('optional');
dispatch('required'); // Error, missing argument
dispatch('noArgument', 'surprise'); // Error, cannot pass an argument
  • 如果Action没有提供通用类型，则Action和ActionReturn现在具有never的默认参数类型： 
const untyped: Action = (node, params) => {
  // Now an error as `params` is expected not to exist
}

const typed: Action<HTMLElement, string> = (node, params) => {
  // `params` is of type string
}
  • onMount现在要求其返回同步函数作为异步函数，如果预计将调用回调销毁，可能会导致错误，因为仅对同步函数是这种情况： 
// ❌ `cleanup()` is not called due to the function being async
onMount(async () => {
  const bar = await foo();
  return cleanup();
});

// ✅ `cleanup()` will be called
onMount(() => {
  foo().then(bar => /* ... */ );
  return cleanup();
});

更新的网站

ð教程网站

The tutorial已重新设计以获得更好的用户体验：

以前 新的
Legacy Tutorial Newer Tutorial

设计仍然相同：带有文本和指令的侧面面板，并带有代码编辑器进行练习。

但是，一些整洁的事情得到了改进，例如在侧面看到文件结构，减少了纳维尔的元素数量，并且各节之间的导航更好。它还具有深色模式！

该教程现在居住在https://learn.svelte.dev上，而前者可以在https://svelte.dev/tutorial/basics

到达

ðSvelte网站

Svelte Website也有返工：

以前 新的
Legacy Page Newer Page

这些页面已经分开，移动导航得到了改进，打字稿文档得到了增强，并且也发布了暗模式。

截至目前，SvelteKit网站尚未更新，但是目前正在进行提供类似体验的返工。

迁移指南

此版本显示为迈向Svelte 5而不是非常有影响力的一步。

为了从Svelte 3升级到Svelte 4，该团队已更新了其迁移工具，并且不仅需要运行以下命令：

npx svelte-migrate@latest svelte-4

请注意，最低版本要求已更新，您将需要：

  • nodejs 16或更高
  • Sveltekit 1.20.4或更高
  • 打字条5或更高

有关要求的更多详细信息在migration guide

中列出

Svelte 5的期望5

到目前为止，几乎没有关于Svelte 5中即将发生的内容的信息。

但是，由于Svelte与Eslint紧密相关，因此包装大小也是如此。随着当前的rewrite of ESLint，到Svelte 5发布时，其尺寸可能会下降超过50％。

由于Svelte专注于开发人员的经验和效率，我们可能会看到这些领域的许多改进，如blog post中所述：

Svelte 5将为Svelte带来主要的新功能和绩效改进

我希望您在那里学到一些有用的东西！