打包速度：优化打包速度，主要是提升了我们的开发效率，更快的打包构建过程，将让你保持一颗愉悦的心 打包体积：优化打包体积，主要是提升产品的使用体验，降低服务器资源成本，更快的页面加载，将让产品显得更加“

webpack一直好像是熟悉的陌生人，最近从源码角度通过debug总算是找到了打包的整个线条，揭开了这神秘的面纱。直接按部就班看源码难免会迷糊，带着自己的疑问反查源码就清晰多了。 先从整体纬度出发，这

围绕 webpack@v5.x 的 Dependency Graph 实现，从源码层面分析 webpack 中如何收集依赖，如何存储依赖信息，以及最后又是如何消费这些依赖关系，从而完成资源编译构建过程

入口繁杂其实意味着你的前端工程搭建必须是以多入口为起点搭建的，如webpack你可以配置entry，自行写一个脚本在构建时获取每一个页面的js入口，而多入口意味着你必须考虑页面之间共享的模块应该如何抽取以达到一个较优的模块利用率，这点我们在文章下一节详细讲。 其实有做过混合开发…

「干货」近万字分享带你真正走进Babel的世界。从工程化前端中的babel各种配置的区别与联系分析，再到打造属于自己的Babel插件，从此带你真正领略前端领域中Babel编译之美！

一、是什么 HMR 全称 Hot Module Replacement，可以理解为模块热替换，指在应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个应用 例如，我们在应用运行过程中修改了某个

Vite是新一代的前端构建工具，具有极速的服务冷启动，轻量快速的热重载等特点，为开发提供极速响应。本文将浅析其原理。

「万字解析」300行代码梳理webpack核心工作流源码，从工程化出发，真正搞懂webpack背后打包机制。带你走进webpack生态开发的世界，真正对应用webpack了然于胸。