hot load那点事
热加载,最初接触的时候是使用create-react-app的时候,创建一个项目出来,修改一点代码,页面自动刷新了,贫道当时就感叹,这是造福开发者的事情。
再后来编写静态页面的时候使用 VS Code 的插件 Liver Server, 也是及时刷新,平僧幸福感慢慢,什么单不单身,狗不狗的,都不重要了。
有一天喝酒回家后,睡的特别好,醒来后突然脑袋一晃,出现一个念头,世界那么大。我想看看 hot load 是咋实现的。
当然这里有两点应该是确认
- 肯定是监听文件变化
- WebSocket 监听服务端变化的通知,刷新文件
于是打开Liver Server 找到源码ritwickdey/vscode-live-server,再通过 lib/live-server/index.js 的标注
#!/usr/bin/env node
"use strict";
/*
Taken from https://github.com/tapio/live-server for modification
*/
找到live-server,就开始了奇妙的探索之旅。
按照正常流程打开 index.js, 先略去非核心代码:
chokidar = require('chokidar');
......
// Setup file watcher
LiveServer.watcher = chokidar.watch(watchPaths, {
ignored: ignored,
ignoreInitial: true
});
function handleChange(changePath) {
var cssChange = path.extname(changePath) === ".css" && !noCssInject;
if (LiveServer.logLevel >= 1) {
if (cssChange)
console.log("CSS change detected".magenta, changePath);
else console.log("Change detected".cyan, changePath);
}
clients.forEach(function(ws) {
if (ws)
ws.send(cssChange ? 'refreshcss' : 'reload');
});
}
LiveServer.watcher
.on("change", handleChange)
.on("add", handleChange)
.on("unlink", handleChange)
.on("addDir", handleChange)
.on("unlinkDir", handleChange)
.on("ready", function () {
if (LiveServer.logLevel >= 1)
console.log("Ready for changes".cyan);
})
.on("error", function (err) {
console.log("ERROR:".red, err);
});
return server;
};
从上可以得知,通过 chokidar 监听文件或者目录,当 change|add|addDir 等等时调用 handleChange。
handleChange 判断了一下变更的文件是不是 css,然后通过 socket 发送不通的事件。
那么问题来了, 如果客服端要能接受事件,必然要创建 WebSocket 连接。当然有人说,可以轮询或者 SSE 等这种嘛。我就不这么认为。
再看一段代码
es = require("event-stream")
var INJECTED_CODE = fs.readFileSync(path.join(__dirname, "injected.html"), "utf8");
......
function inject(stream) {
if (injectTag) {
// We need to modify the length given to browser
var len = INJECTED_CODE.length + res.getHeader('Content-Length');
res.setHeader('Content-Length', len);
var originalPipe = stream.pipe;
stream.pipe = function(resp) {
originalPipe.call(stream, es.replace(new RegExp(injectTag, "i"), INJECTED_CODE + injectTag)).pipe(resp);
};
}
}
send(req, reqpath, { root: root })
.on('error', error)
.on('directory', directory)
.on('file', file)
.on('stream', inject)
.pipe(res);
};
可以看到,如果需要注入,就会注入代码, 这里是直接更新了 stream。
插曲, 这个 es 就是那个搞事情的 event-stream, 哈哈。
我们再看看 INJECTED_CODE 的内容
<!-- Code injected by live-server -->
<script type="text/javascript">
// <![CDATA[ <-- For SVG support
if ("WebSocket" in window) {
(function() {
function refreshCSS() {
var sheets = [].slice.call(
document.getElementsByTagName("link")
);
var head = document.getElementsByTagName("head")[0];
for (var i = 0; i < sheets.length; ++i) {
var elem = sheets[i];
head.removeChild(elem);
var rel = elem.rel;
if (
(elem.href && typeof rel != "string") ||
rel.length == 0 ||
rel.toLowerCase() == "stylesheet"
) {
var url = elem.href.replace(
/(&|\?)_cacheOverride=\d+/,
""
);
elem.href =
url +
(url.indexOf("?") >= 0 ? "&" : "?") +
"_cacheOverride=" +
new Date().valueOf();
}
head.appendChild(elem);
}
}
var protocol =
window.location.protocol === "http:" ? "ws://" : "wss://";
var address =
protocol +
window.location.host +
window.location.pathname +
"/ws";
var socket = new WebSocket(address);
socket.onmessage = function(msg) {
if (msg.data == "reload") window.location.reload();
else if (msg.data == "refreshcss") refreshCSS();
};
console.log("Live reload enabled.");
})();
}
// ]]>
</script>
简单的来讲,如果是 refreshcss 就先删除原来的 css 标签 link, 然后插入新的,并更新
_cacheOverride 的值, 强制刷新。
否则就是 reload 整个页面。
到达这里,基本的东西就完了。 我们要好奇心多一点。我们再多看看chokidar
同理,先看 index.js
这个add方法就是添加监听的方法。
var NodeFsHandler = require('./lib/nodefs-handler');
var FsEventsHandler = require('./lib/fsevents-handler');
......
FSWatcher.prototype.add = function(paths, _origAdd, _internal) {
......
if (this.options.useFsEvents && FsEventsHandler.canUse()) {
if (!this._readyCount) this._readyCount = paths.length;
if (this.options.persistent) this._readyCount *= 2;
paths.forEach(this._addToFsEvents, this);
} else {
if (!this._readyCount) this._readyCount = 0;
this._readyCount += paths.length;
asyncEach(paths, function(path, next) {
this._addToNodeFs(path, !_internal, 0, 0, _origAdd, function(err, res) {
if (res) this._emitReady();
next(err, res);
}.bind(this));
}.bind(this), function(error, results) {
results.forEach(function(item) {
if (!item || this.closed) return;
this.add(sysPath.dirname(item), sysPath.basename(_origAdd || item));
}, this);
}.bind(this));
}
return this;
};
可以看到这里有两种handler,NodeFsHandler和FsEventsHandler。 还没没有得到是咋监听的,那么继续go on, 先看看NodeFsHandler._addToNodeFs。
打开chokidar/lib/nodefs-handler.js
_addToNodeFs ==> _handleFile ==> _watchWithNodeFs ==> setFsWatchListener ==> createFsWatchInstance
var fs = require('fs');
......
function createFsWatchInstance(path, options, listener, errHandler, emitRaw) {
var handleEvent = function(rawEvent, evPath) {
listener(path);
emitRaw(rawEvent, evPath, {watchedPath: path});
// emit based on events occurring for files from a directory's watcher in
// case the file's watcher misses it (and rely on throttling to de-dupe)
if (evPath && path !== evPath) {
fsWatchBroadcast(
sysPath.resolve(path, evPath), 'listeners', sysPath.join(path, evPath)
);
}
};
try {
return fs.watch(path, options, handleEvent);
} catch (error) {
errHandler(error);
}
}
调用的就是fs模块的watch。
呵呵,感觉自己读书少,还是得多看文档。
我们再看看FsEventsHandler
_addToFsEvents >_watchWithFsEvents> createFSEventsInstance==>setFSEventsListener
try { fsevents = require('fsevents'); } catch (error) {
if (process.env.CHOKIDAR_PRINT_FSEVENTS_REQUIRE_ERROR) console.error(error)
}
// Returns new fsevents instance
function createFSEventsInstance(path, callback) {
return (new fsevents(path)).on('fsevent', callback).start();
}
那我们再接着看看fsevents
/* jshint node:true */
'use strict';
if (process.platform !== 'darwin') {
throw new Error(`Module 'fsevents' is not compatible with platform '${process.platform}'`);
}
const { stat } = require('fs');
const Native = require('./fsevents.node');
const { EventEmitter } = require('events');
const native = new WeakMap();
class FSEvents {
constructor(path, handler) {
if ('string' !== typeof path) throw new TypeError('path must be a string');
if ('function' !== typeof handler) throw new TypeError('function must be a function');
Object.defineProperties(this, {
path: { value: path },
handler: { value: handler }
});
}
start() {
if (native.has(this)) return;
const instance = Native.start(this.path, this.handler);
native.set(this, instance);
return this;
}
- 平台只支持darwin,这是嘛呢,我问node开发,告诉我大致是Mac OS吧,那我就相信吧。
- require('./fsevents.node') 引用的是c++扩展
- Native.start(this.path, this.handler) 就是监听,哦哦,原来是这样。
最后我们打开 webpack-dev-server 的/lib/Server.js 文件。
const watcher = chokidar.watch(watchPath, options);
watcher.on('change', () => {
this.sockWrite(this.sockets, 'content-changed');
});
也是这个chokidar, 那么我感觉我能做好多事情了。
亲,你做一个修改后直接发布的应用吧,好歹,好歹。
当然这里,只是弄明白监听和通知的大概。
等有时间,好好研究一下webpack-dev-server.
hot load那点事的更多相关文章
- 【javascript】onload load ready的那些事
首先明确一下页面加载的步骤: 1.下载解析HTML文档结构 2.加载外部脚本文件与样式表文件 3.解析并执行脚本代码 4.构造HTML DOM模型 5 .加载图片等外部文件 6.页面加载完毕 接下来, ...
- OpenNLP:驾驭文本,分词那些事
OpenNLP:驾驭文本,分词那些事 作者 白宁超 2016年3月27日19:55:03 摘要:字符串.字符数组以及其他文本表示的处理库构成大部分文本处理程序的基础.大部分语言都包括基本的处理库,这也 ...
- Session中load/get方法的详细区别
Session.load/get方法均可以根据指定的实体类和id从数据库读取记录,并返回与之对应的实体对象.其区别在于: 如果未能发现符合条件的记录,get方法返回null,而load方法会抛出一个O ...
- jQuery延迟加载插件(Lazy Load)详解
最 新版本的Lazy Load并不能替代你的网页.即便你使用JavaScript移除了图片的src属性,有些现代的浏览器仍然会加载图片.现在你必须修改你的html代 码,使用占位图片作为img标签的s ...
- db2 import export load
DB2中所谓的数据移动,包括: 1. 数据的导入(Import) 2. 数据的导出(Export) 3. 数据的装入(Load) 导入和装入都是利用DB2的相关命令把某种格式的文件中的数据保存到数据库 ...
- Java你可能不知道的事(3)HashMap
概述 HashMap对于做Java的小伙伴来说太熟悉了.估计你们每天都在使用它.它为什么叫做HashMap?它的内部是怎么实现的呢?为什么我们使用的时候很多情况都是用String作为它的key呢?带着 ...
- 优化UITableViewCell高度计算的那些事
优化UITableViewCell高度计算的那些事 我是前言 这篇文章是我和我们团队最近对 UITableViewCell 利用 AutoLayout 自动高度计算和 UITableView 滑动优化 ...
- ready是先执行的,load后执行,DOM文档的加载步骤
在jq中在文档载入完毕后有这几种方式去执行指定函数: $(document).ready(function() { // ...代码... }); //document ready 简写 $(func ...
- load and initialize
NSObject是一切OC类的基类,所以我们必须对NSObject所有的方法有一个清楚的认识. + (void)load; 当类或者分类被加入到runtime时,load方法会被调用,也就是说在mai ...
随机推荐
- Android Fragment与Activity通讯详解
与activity通讯 尽管fragment的实现是独立于activity的,可以被用于多个activity,但是每个activity所包含的是同一个fragment的不同的实例. Fragment可 ...
- Android之动态改变控件大小
利用getLayoutParams()方法和setLayoutParams()方法.三步曲:1.首先利用getLayoutParams()方法,获取控件的LayoutParams.eg:LayoutP ...
- URAL 1303 Minimal Coverage
URAL 1303 思路: dp+贪心,然后记录路径 mx[i]表示从i开始最大可以到的位置 sufmx[i]表从1-i的某个位置开始最大可以到达的位置 比普通的贪心效率要高很多 代码: #inclu ...
- Python mysql-SQL概要
2017-09-05 20:10:58 一.SQL语句及其种类 SQL使用关键字,表名,列名等组合成一条语句来描述操作的内容.关键字是指那些含义或者使用方法是先已经定义好的英语单词.根据RDBMS赋予 ...
- Python mysql-数据库基础知识
2017-09-05 19:10:55 一.数据库定义 从本质上讲,数据库就是信息的集合,它可以存在很长时间,往往是很多年.一般来讲,"数据库"这个词指的是有数据库管理系统管理的数 ...
- ArcGis For Silverlight API,地图显示Gis,绘制点,线,绘制图等--绘制点、线、圆,显示提示信息
ArcGis For Silverlight API,地图显示Gis,绘制点,线,绘制图等--绘制点.线.圆,显示提示信息 /// <summary> /// 绘制界面上的点和线 /// ...
- 20170617xlVBA调查问卷基础数据分类计数
Public Sub GatherDataPicker() Application.ScreenUpdating = False Application.DisplayAlerts = False A ...
- hdu6394Tree lct
树上弹飞绵羊,现场树分块没写出来= = 先预处理倍增,新建一个n+1节点,能弹到就建一条边,然后每操作2就cut,然后link,1的答案就是x到n+1的距离, //#pragma GCC optimi ...
- HDOJ1008
#include "iostream" using namespace std; int main() { ) { int n; cin >> n; ) break; ...
- OC 对象和函数
#import <Foundation/Foundation.h> @interface Car : NSObject {// 成员变量 @public int wheels; int s ...