本文将先介绍 Webpack 编译构建流程，了解编译构建主要耗时在哪些地方；然后介绍如何收集 Webpack 编译性能数据，以及使用工具分析编译性能瓶颈；最后介绍几个有效减少编译构建时长的手段。

压缩项目打包后的体积大小、提升打包速度，是前端性能优化中非常重要的环节，笔者结合工作中的实践总结，梳理出一些常规且有效的性能优化建议

webpack-chain 是什么？通过链式的方式修改webpack的配置。 一些列出本人常用的使用webpack-chain的方式修改webpack配置. 整个文件为： 有时候需要xx插件在aa插件之前调用。 有时候需要xx插件在aa插件之后调用。 webpack4.x默认使…

1. 基础 -- 会配置 2. 进阶 -- 能优化 3. 深入 -- 懂原理 一层层晋级打怪 🦖 ，解答不同深度的 Webpack 面试题问题 🤓

随着项目不断发展壮大，组件数量开始变得越来越多，项目也开始变得庞大，webpack 编译的时间也会越来越久，我们现在的项目编译一次在 40s ——70s 之间，这是一个效率非常低下的操作。优化的手段有很多，之前项目原本已经做了很多，本文从缓存的角度进行优化讲解 babel-lo…

entry是整个配置文件的入口，没有之一。 entry有两种入口，四种配置。 既然有入口，那就肯定有出口啦！就好像人，要吃饭也要拉*。这里的出口就是打包好的东西要把它放在哪里。 module.rules就是loader的配置位置，loader用于解决一些代码的兼容性。 plug…

我一直对我负责的项目成员讲，项目交付给客户的前提是不卡，之后是对用户的友好度必须要高。因为无论你的项目做的有多好，如果用着卡，用户终究会不认可，大家估计也是深有体会。随着时代节奏加快，人们趋向于快速便捷，容易上手的事物。 这一点很重要然而又让用户在一般情况下感觉不到，在产品界有…

最近工作遇到产品的一个优化需求，产品说页面首次加载时间过长大概4-5秒左右，询问有什么好的解决办法，能不能优化一下，一秒出解决方案，直接上图。 以上玩笑，言归正传，页面首次加载时间过长是一版项目都会遇到的问题，接下来我将优化过程和思路分享下。 确实是按需加载，但是打包之后的di…

通过第一节的学习我们知道完成第一步骤解析完AST后，接下来是进入转换，插件在这个阶段就起到关键作用了。 答：presets是预设，举个例子：有一天树酱要去肯德基买鸡翅、薯条、可乐、汉堡。然后我发现有个套餐A包含了(薯条、可乐、汉堡)，那这个present就相当于套餐A，它包含了…