「来源:｜ReactID：react_native」
近日尤大亲自创建了一个仓库用来对Svelte和Vue3组件进行了评测。这其实对我来说非常的感兴趣，因为我最近在业务项目中采用了Svelte进行了开发。
那么到底结果到底是如何呢？(期待的眼神，以为尤大要写Svelte代码来进行评测了。
Vue大家都很熟悉了，如果你不知道Svelte是啥？可以看后起之秀前端框架Svelte从入门到原理。
大体介绍一下，Svelte是一个NoRuntime——无运行时代码的框架。
下面是JacekSchae大神的统计，使用市面上主流的框架，来编写同样的Realword应用的体积：
下面就请看详细的研究步骤，如果你对研究步骤不感兴趣，可以直接跳到最后看结论。
研究的步骤
为了公平性，尤大选择了todomvc来进行构建比较，然后列举了一系列的步骤方案。
这两个框架都实现了一个简单的符合规范、功能相同的todomvc组件。Vue:todomvc.vue（使用了scriptsetup语法）Svelte:todomvc.svelte(基于官方的实现,为了公平去除了uuid方法，害，失望了，原来尤大么有亲自写组件)组件使用各自框架的在线SFC编译器进行单独编译Vue:sfc.vuejs.org
3.1.4-todomvc.vue.jsSvelte:svelte.dev/repl3.38.3-todomvc.svelte.js编译文件使用TerserREPL压缩，然后删除ESimports和exports。这是因为在一个bundle的应用程序中，这些imports/exports不需要或在多个组件之间共享。（可以理解为类似第三方代码，不会影响组件内部实现的大小）Vue:todomvc.vue.min.jsSvelte:todomvc.svelte.min.js然后把文件使用gzip和brotli（「Brotli」是一个开源数据压缩程序库，类似于gzip）压缩Vue:todomvc.vue.min.js.gz/todomvc.vue.min.js.brotliSvelte:todomvc.svelte.min.js.gz/todomvc.svelte.min.js.brotli另外，在SSR的环境下，Svelte需要在hydratable模式下编译其组件，这会引入额外的代码生成。在编译Svelte的时候使用选项hydratable:true来开启SSR并重复2-4的步骤。Vue在SSR环境下生成的代码是完全相同的，但是引入了一些额外的hydration-specific运行时代码(~0.89kbmin+brotli).对于每个框架，默认使用Vite来创建和打包构建（Svelte使用hyderable:false）。每个应用程序同时设置SSR的模式再构建一次。默认Vite打包产生一个vendorchunk（=框架运行时代码）和一个indexchunk（=组件代码）。注意：w/o的意思为without，去除的意思
分析
在客户端模式下，从Vitevendorchunk(min+brotli)这一栏分析。SvelteApp导入1.85kbmin+brotli框架代码，比Vue轻15.04kb。这似乎看起来非常的强悍，但是这是因为框架运行时的差异。(Svelte没有运行时，Vue有运行时)
再来看看组件代码，Svelte的min+