谈谈新的前端框架 Svelte 和现代前端框架的特点

￡神魔★判官ぃ 2023-03-14 13:26 142阅读 0赞

官方网址  
[https://svelte.dev/][https_svelte.dev]  
  
这个框架还是非常不错的，轻量级，代码量少，没有Virtual DOM高性能，涵盖了非常多的优点。  
  
先来说说轻量级，通过CSS缩小后有约17kb的大小，gzip后更是小到了4kb，可以说是比3大前端框架都小。  
代码量少，Svelte直接免去了类和对象的编写，使用Svelte写代码省去30%-40%的代码量。  
  
Svelte 的代码长什么样子呢？

\[Java\] *纯文本查看* *复制代码*

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 01 02 03 04 05 06 07 08 09 10 11 12 </td> 
 <td> <code>&lt;script&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let count = </code><code>0</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$: doubled = count * </code><code>2</code><code>;</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>function handleClick() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>count += </code><code>1</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&lt;/script&gt;</code> &nbsp; <code>&lt;button on:click={handleClick}&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>Clicked {count} {count === </code><code>1</code> <code>? </code><code>'time'</code> <code>: </code><code>'times'</code><code>}</code> <code>&lt;/button&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

有过前端开发经验的朋友第一眼看到这段代码肯定会问，这个 $: 是什么玩意？  
  
其实这个就是相当于Vue中的computed的意思，React的useMemo() 的意思。是不是看上去很简洁？  
  
Svelte的编译器会把这一段代码编译成以下代码，然后再通过webpack编译打包。  
细心对比编译前后的代码，我们可以看出Svelte设计的巧妙之处。  
  
import 语句，类声明和export语句是Svelte编译器之后加上的，节约了你去写这些代码的时间。同时因为没有类或对象的编写过程，节约了写this关键字。  
编译好的create\_fragment方法是用来生成DOM目录树的，它是直接将源代码的html模板编译成了代码去实现响应式变化，最终这个新生成的节点会直接使用到真DOM上，这就是它宣传的没有Virtual DOM和它高性能的原因（因为有了Virtual DOM，还要做Diff之类的算法去做比对）。  
Svelte框架在webpack打包前就编译好了纯原生JS库就可以执行代码，它的运行库不用再对类似于计算属性的内容再做额外的库和运算，所以它编译出来的包很小，执行效率也更高。也正因如此，Svelte的打包不再区分dev和prod模式，保证了生产环境和最终产品包的一致性。

\[Java\] *纯文本查看* *复制代码*

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 026 027 028 029 030 031 032 033 034 035 036 037 038 039 040 041 042 043 044 045 046 047 048 049 050 051 052 053 054 055 056 057 058 059 060 061 062 063 064 065 066 067 068 069 070 071 072 073 074 075 076 077 078 079 080 081 082 083 084 085 086 087 088 089 090 091 092 093 094 095 096 097 098 099 100 </td> 
 <td> <code>/* App.svelte generated by Svelte v3.22.2 */</code> <code>import { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>SvelteComponent,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>append,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>detach,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>element,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>init,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>insert,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>listen,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>noop,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>safe_not_equal,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>set_data,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>space,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>text</code> <code>} from "svelte/internal";</code> &nbsp; <code>function create_fragment(ctx) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let button;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let t0;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let t1;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let t2;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let t3_value = (/*count*/ ctx[0] === 1 ? "time" : "times") + "";</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let t3;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let t4;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let p;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let t5;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let t6;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let t7;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let dispose;</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>c() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>button = element("button");</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>t0 = text("Clicked ");</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>t1 = text(/*count*/ ctx[0]);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>t2 = space();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>t3 = text(t3_value);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>t4 = space();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>p = element("p");</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>t5 = text(/*count*/ ctx[0]);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>t6 = text(" doubled is ");</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>t7 = text(/*doubled*/ ctx[1]);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>m(target, anchor, remount) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>insert(target, button, anchor);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>append(button, t0);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>append(button, t1);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>append(button, t2);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>append(button, t3);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>insert(target, t4, anchor);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>insert(target, p, anchor);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>append(p, t5);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>append(p, t6);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>append(p, t7);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if (remount) dispose();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>dispose = listen(button, "click", /*handleClick*/ ctx[2]);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>p(ctx, [dirty]) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if (dirty &amp; /*count*/ 1) set_data(t1, /*count*/ ctx[0]);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if (dirty &amp; /*count*/ 1 &amp;&amp; t3_value !== (t3_value = (/*count*/ ctx[0] === 1 ? "time" : "times") + "")) set_data(t3, t3_value);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if (dirty &amp; /*count*/ 1) set_data(t5, /*count*/ ctx[0]);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if (dirty &amp; /*doubled*/ 2) set_data(t7, /*doubled*/ ctx[1]);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>i: noop,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>o: noop,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>d(detaching) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if (detaching) detach(button);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if (detaching) detach(t4);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if (detaching) detach(p);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>dispose();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>};</code> <code>}</code> &nbsp; <code>function instance($$self, $$props, $$invalidate) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let count = 0;</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>function handleClick() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$$invalidate(0, count += 1);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let doubled;</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$$self.$$.update = () =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if ($$self.$$.dirty &amp; /*count*/</code> <code>1</code><code>) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$: $$invalidate(</code><code>1</code><code>, doubled = count * </code><code>2</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>};</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>[count, doubled, handleClick];</code> <code>}</code> &nbsp; <code>class</code> <code>App </code><code>extends</code> <code>SvelteComponent { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>constructor(options) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>super</code><code>();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>init(</code><code>this</code><code>, options, instance, create_fragment, safe_not_equal, {});</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>}</code> &nbsp; <code>export </code><code>default</code> <code>App;</code> </td> 
 </tr> 
 </tbody> 
</table>

Svelte还在发展，目前的缺点也很明显，就是官方还不支持TypeScript，官方还不支持路由，扩展库不多。  
  
对于这种结构编译型的框架，我觉得会是前端框架发展的方向。  
因为要做代码结构转换，多支持TypeScript会比其他3大框架的工作量多得多，我想这也是为什么官方迟迟没有退出的原因。  
  
现代前端框架发展至今，本文我还想总结出他们共性。  
![format_png][]  
转自CSDN：[https://blog.csdn.net/weixin\_36330664/article/details/106022804][https_blog.csdn.net_weixin_36330664_article_details_106022804]

[https_svelte.dev]: https://svelte.dev/
[Link 1]: http://bbs.itheima.com/#
[format_png]: /images/20230312/78cb52a896d5483ab15c73b02fdcaaed.png
[https_blog.csdn.net_weixin_36330664_article_details_106022804]: https://blog.csdn.net/weixin_36330664/article/details/106022804