经过前几篇文章我们介绍了 webpack 如何从配置文件的入口开始，将每一个文件转变为内部的 module，然后再由 module 整合成一个一个的 chunk。这篇文章我们来看一下最后一步 —— chunk 如何转变为最终的 js 文件。 上篇文章主要是梳理了在 seal 阶…

所以只要某一个文件被修改，所有输出文件的hash都会跟着变化；因此它有一个弊端，一旦修改了某一个文件，整个项目的文件缓存都会失效。 webpack的三种hash生成策略都是根据源码内容来生成，只是该源码已经被webpack封装成能在webpack环境中运行的代码了，包含每一个源…

对于 webpack 来说每个文件都是一个 module，这篇文章带你来看 webpack 如何从配置中 entry 的定义开始，顺藤摸瓜找到全部的文件，并转化为 module。 webpack 入口 entry，entry 参数是单入口字符串、单入口数组、多入口对象还是动态函…

SSR和NSR都是非常好的解决白屏的方案，但是缺点也很明显，成本太高，SSR非常依赖服务的稳定性，对于中小公司而言很少有资源能为前端提供一套稳定的服务器环境，一旦node出现故障，损失很大，而CSR方案则是对于客户端来说成本很高，有很多不确定性。 并于2021年2月开源,感谢每…

本项目是淘系用户增长团队的一个大中台系统，单页应用，涵盖很多业务功能，运用了很多懒加载页面组件来提升性能，首屏时间 1s 左右，体验良好。然而大项目文件很多，导致构建和发布时间很长，内存占用较大。我的任务是尽可能优化与此相关的问题。 首先不难发现问题并不在用户体验上，而在于开发…

对于webpack的hash，常用于cdn缓存。我理解的是文件不变的情况下，最后打包出来的hash串也不会变。最近被问到了这是三个hash的区别，就查了一下，发现还很有讲究。 每次构建的生成唯一的一个hash，且所有的文件hash串是一样的。 不用怕，webpack已经提供方案…

webpack 是我们现阶段要掌握的重要的打包工具之一，我们知道 webpack 会递归的构建依赖关系图，其中包含应用程序的每个模块，然后将这些模块打包成一个或者多个 bundle。 莫慌，我们一点点拆分开看，其实总体的文件就是一个 IIFE——立即执行函数。 函数的入参 mo…

✨满满的干货，不容错过哦. 写文不易，点赞是最大的鼓励。 文章下篇已经更新：深入浅出 Babel 下篇：既生 Plugin 何生 Macros 有点冷清，赞起来。 上图是 Babel 的处理流程, 如果读者学习过编译器原理，这个过程就相当亲切了. 1️⃣词法解析(Lexical…

关于AST的介绍，网上已经一大堆了，不仅生涩难懂，还自带一秒劝退属性。其实我们可以很（hao）接（bu）地（yan）气（jin）的去了解一个看上去高端大气的东西，比如，AST是一个将代码解构成一棵可以千变万化的树的黑魔法。所以，只要我们知道咒语怎么念，世界的大门就打开了。有趣的…