为什么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 ...
随机推荐
- Spring框架学习10——JDBC Template 实现数据库操作
为了简化持久化操作,Spring在JDBC API之上提供了JDBC Template组件. 1.添加依赖 添加Spring核心依赖,MySQL驱动 <!--Spring核心基础依赖--> ...
- Python开发之pip使用详解
1 pip的优点 pip如今已经成为了Python的一大特色,可以很方便得协助Python开发者进行包管理.综合来说,匹配拥有如下优点: pip提供了丰富的功能,其竞争对手easy_install只支 ...
- 使用element-ui制作三级级联城市选择器
1.效果预览: 2.引入资源文件 1.vue资源 <script src="https://unpkg.com/vue/dist/vue.js"></script ...
- Python学习——web框架
对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. WSGI(Web Server Gateway Interface)是一种规范,它定义了使用p ...
- NOIp模拟赛 现实(DP 拓扑)
题目来源:by lzz \(Description\) 给定一张有向图,求对于哪些点,删除它和它的所有连边后,图没有环. \(n\leq 5\times10^5,m\leq 10^6\). \(Sol ...
- Postman使用记录
1. 情况: 当 本地需要测试,线上的项目也需要同时测试时,地址了输入还需要打开多个窗口,麻烦 点击圆圈部分 testForm是我新建的 输入请求的action名字 点击齿轮按钮: 地址栏填入方式: ...
- redis 在 php 中的应用(Server[ 服务器] 篇)
本文为我阅读了 redis参考手册 之后编写,注意 php_redis 和 redis-cli 的区别(主要是返回值类型和参数用法) 目录: Server(服务器) BGREWRITEAOF BGSA ...
- Unity3D引擎中特殊的文件夹
Editor Editor文件夹可以在根目录下,可以在子目录里,只要名是Editor就可以./xxx/xxx/Editor 和 /Editor 是一样的,多少个叫Editor的文件夹都可以.Edit ...
- 【springboot】【socket】spring boot整合socket,实现服务器端两种消息推送
参考地址:https://www.cnblogs.com/hhhshct/p/8849449.html
- 基于Centos搭建 Hadoop 伪分布式环境
软硬件环境: CentOS 7.2 64 位, OpenJDK- 1.8,Hadoop- 2.7 关于本教程的说明 云实验室云主机自动使用 root 账户登录系统,因此本教程中所有的操作都是以 roo ...