前言
又到周末了,今日早读文章由《React状态管理与同构实战》作者
LucasHC授权分享。正文从这开始~~
翻看日历,发现今天是庚子年第一个节气——立春。上古以“斗柄指向”法,用北斗星斗柄指向寅位时为立春。干支纪元,以立春为岁首,意味着新的一个轮回已开启,万物起始、一切更生。尽管我们今天仍然面临险峻疫情的挑战,但今日就代表了温暖、生长,我也愿意在在此刻梳理计划本年度的技术发展,做一些春耕播种的工作。
让我们把目光先聚焦到即将破土而出的Webpack5上,尽管国内外已经有抢鲜试水的尝试,其中也不乏
张立理的文章:Webpack5升级实验,讲述升级路径和体会,但是尚没发现从技术原理角度的设计解析。这篇文章,我就以Spec:Amodulediskcachebetweenbuildprocesses为方向,介绍一下Webpack5最令人期待的「长效缓存」功能的前世今生,技术背景以及落地方案。同时希望“管中窥豹”,介绍一下整体Webpack的构建流程。整篇文章将会设计大量Webpack实现原理和体系设计,阅读需要一定的前置知识和理解成本。总之:“你认为的缓存不仅仅是简单的「空间换时间」,同时,你认为的「Webpack工程师」恰恰是前端体系中最具功力的拼图板块”。
关于现状和深度场景关于问题和解决方向这一部分我们将从两个方面,介绍现有webpack构建的痛点和已有解决方案,我们逐一分析这些解决方案的不足,并以Webpack官方视角,来探讨是否存在更可行、更优雅的官方解决方案。
不间断进程(continuousprocesses)和缓存对于大型复杂项目应用,在开发阶段,开发者一般习惯使用Webpack--watch选项或者webpack-dev-server启动一个不间断的进程(continuousprocesses)以达到最佳的构建速度和效率。Webpack--watch选项和webpack-dev-server都会监听文件系统,进而在必要时,触发持续编译构建动作。此中细节值得研究,源码涉及到文件系统的监听、内存读写、不同操作系统的兼容、插件化和分层缓存设计等,也有很多著名的性能优化issues,这里不再一一介绍,但提炼出关键点需要读者优先了解,以帮助对后文的理解消化:
正常启动Webpack构建流程会调用