主要环境依赖: webpack5 websocket
原理分析:
- 常用编译工具都自带自动刷新功能,或者hmr热更新,基本开箱即用,且webpack本身也有devserver;
- 但插件开发比较特殊,浏览器需要读取指定目录下的已有文件运行,在之前的v2中一般通过background监听目录文件变动从而刷新;
- 而v3的service worker(background)有自动休眠策略,用老方法强制常驻对性能会不太好且会间歇性中断,所以干脆自建websocket服务,可定制性更高!
源码直达: ws-reload-plugin
总体实现流程:
- webpack启动的同时生成一个ws服务端(
main)和一个ws客户端(customer1),每次编译完成时,customer1发送消息给main,main再告诉customer2(也就是content) - content内部也创建一个ws客户端(
customer2),当接收到消息时,通过sendMessage给Service workers(background)发送消息 - Service worker执行runtime和tab刷新!
待续......
