Svelte笔记一:入门脚手架
背景
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
的值进行修改,需要三个步骤:
- 先后两次virtual dom要记录下来,对相同的节点进行比较
- 需要把该节点上所有的属性进行比照,记录下变动的内容
- 升级真实dom
svelte则是省去前面两步,直接升级dom,它是一个compiler,对已有的组件进行预编译,最终实现的代码。关键的步骤都已经在编译过程中完成了。
if (changed.name) { text.data = name;}
尤大大发推说vue3能够比svelte更加快。具体的情况现在还无从考证。而且有时候benchmark不能说明所有的问题,由于现实的开发情况往往和benchmark不太一样。但是有一点我是能确认的就是越贴近原生性能越好,除了后端页面外,其余的页面svelte有着天然的优势,由于它的体积小,作用纯粹。
多页面开发模版
因为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笔记一:入门脚手架