Svelte笔记一:入门脚手架

作者 : 开心源码 本文共2620个字,预计阅读时间需要7分钟 发布时间: 2022-05-13 共157人阅读

背景

svelte是来自rollup的作者Rich Harris,它主打的就是轻量和高效开发效率。如今开发的项目除了后端系统外,其余前台项目基本都是基于手机端页面,资讯页面,博客为主。一个轻量级的框架能处理非常多的问题。

一项调查统计了现实世界中 Web 应用使用多种 Web 框架构建的相关数据。统计显示,使用少量流行框架的应用经过 gzip 压缩后的大小(KB)分别为:
Angular + ngrx:134
React + Redux:193
Vue:41.8
Svelte:9.7

前台框架给我们提供什么

在做了那么多的前台项目之后,前台框架究竟带给我们什么样的开发体验。毫无疑问的是效率的提高,但是假如要考虑到极致的客户体验,极小的项目构建体积是每一个前台项目必需考虑的一个问题,尤其是手机端的项目。减少20kb js大小,给客户带来的客户体验优化是非常大的,特别在弱网环境。svelte应该是如今最轻量级的前台框架之一。它的轻量是建立于没有多余的运行时,没有virtual dom的基础上。相似vue的构思,所有的逻辑会集中于模版解决本身。

在web component还未成熟的时代下,一个标准的前台框架是非常有必要的,有助于提高我们项目的开发效率。我总结为以下两个点:

  • 数据流的解决
  • 组件化以及代码复用

然而svelte给予开发者的东西不多不少,恰好是这些内容。

virtual-dom的价值

svelte的优势站在损失掉virtual-dom的基础之上,但是缺少了virtual dom页面就会慢很多吗?还是变得更快。这样,给予我们一个思考题。前台框架究竟需不需要一个virtual dom?

Rich Harris大佬的virtual-dom-is-pure-overhead一文中,指出virtual dom并非免费的午餐,它也会带来性能和内存上的消耗。例如一个HelloWorld的组件,要把props的值进行修改,需要三个步骤:

  1. 先后两次virtual dom要记录下来,对相同的节点进行比较
  2. 需要把该节点上所有的属性进行比照,记录下变动的内容
  3. 升级真实dom

svelte则是省去前面两步,直接升级dom,它是一个compiler,对已有的组件进行预编译,最终实现的代码。关键的步骤都已经在编译过程中完成了。

if (changed.name) {  text.data = name;}

尤大大发推说vue3能够比svelte更加快。具体的情况现在还无从考证。而且有时候benchmark不能说明所有的问题,由于现实的开发情况往往和benchmark不太一样。但是有一点我是能确认的就是越贴近原生性能越好,除了后端页面外,其余的页面svelte有着天然的优势,由于它的体积小,作用纯粹。

Twitter

多页面开发模版

因为svelte的轻量化的特性,我会将它和多页面打包联想在一起。与SPA的统一集成性不同,每个页面往往都是独立运作,项目中各种活动页面,经营页面都是如此。因为打包后的js包很小,所以ssr的效果也不再显著。对于首屏显示要求不高的业务场景,完全可以考虑CSR或者者静态直出就可。

brandonxiang/svelte-webpack-mpa是一个多页面开发模版,基于以往多页面的开发经验。

里面自带了svelte-preprocess,Postcss的Autoprefixer插件有助于解决浏览器的兼容问题,你也可以自行配置scss或者者less。

使用方法

npx degit brandonxiang/svelte-webpack-mpa svelte-appyarn# ornpm i

开发

dev是起服务的命令。http://localhost:9000/page1.html是第一个页面。http://localhost:9000/page2.html则是第二个页面,build则是构建命令。

yarn dev# ornpm run dev

配置scss

svelte的官方源码把所有代码预编译都会经过preprocess,是为了让开发者自行调整,而svelte-preprocess帮你完成了99%的工作,只要要装上相关依赖,写好配置就可。

  module: {    rules: [      ...      {        test: /\.(html|svelte)$/,        exclude: /node_modules/,        use: {          loader: 'svelte-loader',          options: {            preprocess: require('svelte-preprocess')({                pug({ /* pug options */ }),                scss({ /* scss options */ }),                coffeescript({ /* coffeescript options */ })            })          },        },      },      ...    ]  }  ...

吐槽

svelte对于typescript的支持不是特别友好,由于它是以模版语言为基础的。这一点和vue相似,假如以模版为SFC的开发形式,vue的组件属性类型判断并不如react友好。期待一下vue3和svelte的后续ts支持。

语法

svelte进入3.0后,语法借鉴了vue的SFC语法,非常简单。官网上有很多栗子,这里只提及一个循环渲染的栗子,语法相似模版语言,数值的插值使用{},大家感受一下,熟习vue的童鞋应该很熟习。因为框架中没有virtual-dom,所以不需要像vue和react一样需要dom根节点。

<script>    let cats = [        { id: 'J---aiyznGQ', name: 'Keyboard Cat' },        { id: 'z_AbfPXTKms', name: 'Maru' },        { id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }    ];</script><h1>The Famous Cats of YouTube</h1><ul>    {#each cats as { id, name }, i}        <li><a target="_blank" href="https://www.youtube.com/watch?v={id}">            {i + 1}: {name}        </a></li>    {/each}</ul>

参考资料

  • 被称为“三大框架”替代方案,Svelte如何简化Web开发工作

题外话

shopee,又称虾皮,是一家腾讯投资的跨境电商平台。这里加班少,技术氛围好。假如想和我并肩作战一起学习,可以找我内推。邮箱weiping.xiang@shopee.com,非诚勿扰。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » Svelte笔记一:入门脚手架

发表回复