petite-vue
源码解析和掘金编辑器的源码解析,发现里面用到了Svelte
这个框架Javascript - Jquery
为代表的时代,例如,引入Jquery
只要<script src="cdn/jquery.min,js"></script>
gulp
webpack
等构建工具出现,React和Vue也在这个时候开始火了起来,随即而来的是一大堆工程化的辅助工具,例如babel
,还有提供整套服务的create-react-app
等脚手架这也带来了问题,当然这个是npm
的问题,每次启动项目前,都要安装大量的依赖,即便出现了yarn pnpm`等优化的依赖管理工具,但是这个问题根源不应该使用工具解决,而是问题本质是依赖本地化,代码和依赖需要工具帮助才能运行在浏览器中
总结就是:现有的开发模式,让项目太重,例如我要使用某个脚手架,我只想写一个helloworld
演示下,结果它让我装500mb
的依赖,不同的脚手架产物,配置不同,产物也不同
vite
号称不打包,用的是浏览器本身支持的esm
模块化,但是它没有解决依赖的问题,因为依赖问题本身是依赖的问题,而不是工具的问题2.不需要安装依赖,一切都可以import from remote
,我觉得webpack5
的Module Federation
设计,就考虑到了这一点,下面是官方的解释:
但是这可能并不是最佳实践,目前是有import from http
,例如
import lodash from 'https://unpackage/lodash/es'
import from http
我想只是解决了一个点的问题,就是不用手动安装依赖到本地磁盘前段时间我写过,在浏览器中本地运行Node.js
这个技术叫WebContainers
技术,感兴趣的可以去翻翻我公众号之前的文章
vite
的不打包理念:直接使用浏览器支持的esm
模块化WebContainers
技术:让浏览器直接运行node.js
import from remote
,从一个个远程地址直接引入可以使用的依赖webIDE
:类似remix
编辑器,直接全部可以在云端搞定webIDE
,可以直接引入远程依赖,浏览器可以运行Node.js
,使用的都是esm
模块化,不需要打包工具,项目启动的时间和热更新时间都非常短,构建也是直接可以在浏览器中构建这些看似解决了我们之前提出的大部分问题,回到今天的主题
dom
的时代?我觉得,有这个趋势,例如petite-vue
,还有Svelte
。
因为之前写过petite-vue
源码解析了,我们今天就讲讲Svelte
Svelte
是一种全新的构建用户界面的方法。传统框架如 React 和 Vue 在浏览器中需要做大量的工作,而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。
https://zhuanlan.zhihu.com/p/97825481
,感觉他写得很好,这里照搬一些过来吧直接当用户在你的页面进行各种操作改变组件的状态时,框架的runtime会根据新的组件状态(state)计算(diff)出哪些DOM节点需要被更新
可是,这些被打包进去的框架,实在太大了。
(今天还在跟同事说,前年写的登录站点,纯原生手工打造,性能无敌)
100kb
对于一个弱网环境来说,很要命,我们看看svelte
减少了多少体积:虚拟dom
并没有加快用户操作浏览器响应的速度,只是说,方便用于数据驱动视图,更便于管理而已,并且在一定程度上,更慢。真正最快的永远是:
currentDom.innerHtml = '前端巅峰';
所以Svelte
并不是说多好,而是它的这种理念,可能未来会越来越成为主流
通过全新的转换,你可以单独使用JSX而无需引入React.
我猜想,或许React团队有意将jsx语法推动到成为es标准语法中去,剥离开来希望会大大提升。
前端巅峰
点个在看/赞/关注
三连吧,原创不易背景 目前Mac自带的终端不是很好用,好多常规的Linux命令都不支持 比如:ll命令...
TOP云 (west.cn)4月1日消息,据外媒消息,国外加密电邮服务商ProtonMail日前已...
最近有伙伴问小编的问题: 页面排版的时候发现图片下面有那么1-2像素的间隙空白...
大家好,我是你们的 猫哥,那个不喜欢吃鱼、又不喜欢喵 的超级猫 ~ 猫哥会在每周...
dreamweaver中想要制作制作滚动代码,该怎么制作向上滚动的文字效果呢?下面我们...
相关文章:网页内容页面制作的9个实用建议 网页页面设计的4个实用建议 布局 1、...
导读:界面设计师Joshua Porter在自己的博客中发表了这篇文章,文章中列举了20条...
简介: 高德的技术大佬向老师在谈论方法论时说到:“复杂的问题要简单化,简单的...
本文介绍了Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码,分享给大家,...
要做出一个受人关注的网站,都需要遵守那些原则呢? 根据我几年来 网站建设 的经...