Leon Blog

Leon.T Yida Tang's Home

bundleless热更新原理探索

ESM模块化探索

原理是bundleless + react-refresh + websocket 通信实现热更新前言最近实践了bundleless，在热更新上栽了很多跟头，这次更新一下最近热更新原理探索的实践，我们先来梳理一下Bundleless + react-refresh实现热更新的时序图：上面时序图需要注意的点有几点：需要向客户端HTML注入一些clie...

Posted by Leon on November 19, 2020

从Vite工具看ESM模块化开发探索（一）

ESM模块化探索

对于公司内部现有的Webpack打包流程认识后，发现由于WebGL，threejs，pixijs等包的本身性能、体量瓶颈，导致我们代码进行rebuild或者HotReplacement热更新的时候会导致速度非常慢的情况场景大，业务复杂，代码多导致现有开发模式有以下业务痛点：打包编译速度过慢，开发效率低，有时编译甚至要8分钟，热更新最慢每次也要几分钟热更新不太贴近业...

Posted by Leon on July 21, 2020

从剖析Vue-cli源码出发完整的React业务脚手架实践（二）

项目的构建及服务（create）

上一篇文章我们介绍了如何搭建项目的架构和脚手架的基础模式，这一章节我们继续上次的业务：项目的构建以及服务，着重从如何构建项目文件目录的流程来剖析。写在前面这是一篇长期持续更新的React脚手架实践，吸取Vue Cli的脚手架经验，通过我们习惯的插件-预设的思想去构造我们的React业务脚手架，这可能不是最好的脚手架的开发实践，但是一定是最完整的脚手架开发实践教程。文章导航...

Posted by Leon on May 7, 2020

从剖析Vue-cli源码出发完整的React业务脚手架实践（一）

脚手架架构基础搭建

随着公司业务线增加了以后，基础脚手架已经满足不了需求，于是开始着手业务线的脚手架开发，我基于vue cli源码和自己的业务实践，吸取vue-cli插件模式的开发优势和业务结合，做一套关于React的项目脚手架。写在前面这是一篇长期持续更新的React脚手架实践，为的是吸取Vue Cli的脚手架经验，通过我们习惯的插件-预设的思想去构造我们的React业务脚手架，这可能不是最好...

Posted by Leon on April 19, 2020

Webpack插件开发实践——提高开发效率之SVG转webfont

SVG转webfont

此文针对具有webpack基础和插件开发基础的同学，这是个人在提高前端开发效率的一次实践记录，若有不足请补充引言我的博客地址唐益达欢迎你https://www.tangyida.top，欢迎来拍砖。此项目仓库地址在此Svg2Iconfont-webpack svg转webfont实践，如果这篇文章对你有点点用处的话，欢迎star！同时也欢迎提PR和问题，此文仅仅是我这次开...

Posted by Leon on April 13, 2020