为什么watch机制不是银弹?
几乎所有构建系统都选择使用watch机制来解决开发过程中需要反复生成构建后文件的问题,但在watch机制下,长期以来我们必须忍受修改完代码,保存完代码必须喝口茶才能刷新看看效果的问题。在这里我们尝试探讨为什么watch不是银弹,并尝试寻找一种更好的方案来解决这个问题。
watch基于的事实
当一个文件修改,我们能知道其修改可能导致的文件修改,那么重新构建这些文件即可。
通常对于文件A,构建成文件B这种场景,这种对应关系是极好确定的。但现实场景下,构建过程往往不是那么简单。例如:
文件A + 文件B(被文件A引用) -> 文件C
在这种场景下,文件B的修改,可能难以定位哪些文件需要重新跑构建任务,因为可能有很多文件引用了文件B。
除非我们建立一个依赖树,并在每次文件更新的情况下更新依赖树,并根据新的依赖树触发文件构建。但这对每一个插件都需要自行实现这个机制,并且极易出错。故实际上watch机制仅仅是重跑了整个task。所以当项目越来越大的时候,watch机制将越来越慢(因为越来越多文件需要重新跑整个过程,即使通过缓存减少了整个过程所需的耗时)。
解决方案
src直接可用
AlloyTeam & @ldjking,简单来说直接让src直接可跑,把构建任务放置在浏览器端,甚至根本不构建,既可做到及时修改及时刷新,在开发过程中减少了时间消耗。线下构建仅仅负责性能优化上的问题,不负责开发效率。
典型代表有LESS、React等。但也有一些问题:- 难以在浏览器端实现优雅的构建方式,难以提供强大的功能进一步减少开发成本,大部分只能采用类似
<style type="text/less"></style>的方式引入脚本。 - 开发模式下的执行顺序不一定和实际场景相同,可能导致隐形bug出现,例如实现一个
HTML inline由于开发模式下inline是异步的,而发布模式下inline时同步的,产生莫名其妙的bug。 - 浏览器编译性能堪忧,例如js版的
sass,编译速度几乎无法忍受。 - 需要维护线上、线下两套构建系统,增加了工具开发成本。
- 难以在浏览器端实现优雅的构建方式,难以提供强大的功能进一步减少开发成本,大部分只能采用类似
本地服务器动态构建
一个事实是:在合理的规范支持下,我们可以从浏览器请求的文件,回溯到该文件构建过程中的入口文件。这样我们就可以动态触发一次构建过程。
通过在本地建立一个服务器,让服务器捕获请求后,在服务器中动态构建。只要回溯到入口文件,我们便能将入口文件丢进gulp插件组成的管道中,则输出便是浏览器需要的文件。
这样我们就能解决上面的所有问题。
为什么watch机制不是银弹?的更多相关文章
- Python数据模型与Python对象模型
数据模型==对象模型 Python官方文档说法是"Python数据模型",大多数Python书籍作者说法是"Python对象模型",它们是一个意思,表示&quo ...
- Storm内部的消息传递机制
作者:Jack47 转载请保留作者和原文出处 欢迎关注我的微信公众账号程序员杰克,两边的文章会同步,也可以添加我的RSS订阅源. 一个Storm拓扑,就是一个复杂的多阶段的流式计算.Storm中的组件 ...
- WebAssembly是解决JavaScript 痼疾的银弹?
写在前面 <没有银弹>是 Fred Brooks 在 1987 年所发表的一篇关于软件工程的经典论文.该论文的主要论点是,没有任何一项技术或方法可以能让软件工程的生产力在十年内提高十倍. ...
- 你所不知道的库存超限做法 服务器一般达到多少qps比较好[转] JAVA格物致知基础篇:你所不知道的返回码 深入了解EntityFramework Core 2.1延迟加载(Lazy Loading) EntityFramework 6.x和EntityFramework Core关系映射中导航属性必须是public? 藏在正则表达式里的陷阱 两道面试题,带你解析Java类加载机制
你所不知道的库存超限做法 在互联网企业中,限购的做法,多种多样,有的别出心裁,有的因循守旧,但是种种做法皆想达到的目的,无外乎几种,商品卖的完,系统抗的住,库存不超限.虽然短短数语,却有着说不完,道不 ...
- Serverless 2.0,鸡蛋还是银弹?
简介: 本篇旨在介绍 Serverless 如今应用到应用(非病句)的各种困境,以及帮助用户如何去规避一些问题,提前了解方向. 浪潮 从 2014 年 Serverless 冒头至今,已经有无数的勇士 ...
- 笔记:Binder通信机制
TODO: 待修正 Binder简介 Binder是android系统中实现的一种高效的IPC机制,平常接触到的各种XxxManager,以及绑定Service时都在使用它进行跨进程操作. 它的实现基 ...
- JAVA回调机制(CallBack)详解
序言 最近学习java,接触到了回调机制(CallBack).初识时感觉比较混乱,而且在网上搜索到的相关的讲解,要么一言带过,要么说的比较单纯的像是给CallBack做了一个定义.当然了,我在理解了回 ...
- 谈谈DOMContentLoaded:Javascript中的domReady引入机制
一.扯淡部分 回想当年,在摆脱写页面时js全靠从各种DEMO中copy出来然后东拼西凑的幽暗岁月之后,毅然决然地打算放弃这种处处“拿来主义”的不正之风,然后开启通往高大上的“前端攻城狮”的飞升之旅.想 ...
- 路由的Resolve机制(需要了解promise)
angular的resovle机制,实际上是应用了promise,在进入特定的路由之前给我们一个做预处理的机会 1.在进入这个路由之前先懒加载对应的 .js $stateProvider .state ...
随机推荐
- Angular 个人深究(三)【由Input&Output引起的】
Angular 个人深究(三)[由Input&Output引起的] 注:最近项目在做别的事情,angular学习停滞了 1.Angular 中 @Input与@Output的使用 //test ...
- AeroSpike踩坑手记1:Architecture of a Real Time Operational DBMS论文导读
又开了一个新的坑,笔者工作之后维护着一个 NoSQL 数据库.而笔者维护的数据库正是基于社区版本的 Aerospike打造而来.所以这个踩坑系列的文章属于工作总结型的内容,会将使用开发 Aerospi ...
- Android-LruCache与DiskLruCache
Android LruCache与DiskLruCache 学习自 Android开发艺术探索 https://blog.csdn.net/guolin_blog/article/details/28 ...
- ECS部署Django之旅
引言: 在完成了一个基于Django的博客系统后,我目前着手将我的博客系统部署到阿里云的ECS服务器上. 之所以选择云服务器,在我还在lab的时候,还是学生所以比较便宜一年100软妹币的样子,性价比极 ...
- 前端性能优化 —— 减少HTTP请求
简要:对于影响页面呈选 的因素有3个地方:服务器连接数据库并计算返回数据 , http请求以及数据(文件)经过网络传输 , 文件在浏览器中计算渲染呈选: 其中大约80%的时间都耗在了http请求上,所 ...
- linux find命令用法
Linux下find命令在目录结构中搜索文件,并执行指定的操作.Linux下find命令提供了相当多的查找条件,功能很强大.由于find具有强大的功能,所以它的选项也很多,其中大部分选项都值得我们花时 ...
- ALSA学习资料
一.内核文档 Linux Sound Subsystem Documentation 二.一些API 1.snd_pcm_period_elapsed 2.snd_pcm_lib_buffer_by ...
- Delphi的接口委托示例
{ 说明:该事例实现的效果,在单个应用或代码量小的项目中,可以完全不用接口委托来完成. 之所以采用委托接口,主要是应用到:已经实现的接口模块中,在不改变原有代码的情况下, 需要对其进行扩展:原始 ...
- App架构师实践指南五之性能优化二
App架构师实践指南五之性能优化二 2018年07月30日 13:08:44 nicolelili1 阅读数:214 从UI和CPU方面来说App流畅体验优化,核心为流畅度/卡顿性能优化. 1.基 ...
- Tensorflow 之finetune微调模型方法&&不同层上设置不同的学习率
在不同层上设置不同的学习率,fine-tuning https://github.com/dgurkaynak/tensorflow-cnn-finetune ConvNets: AlexNet VG ...