常用构建工具的实践总结及原理分析

最近，项目组在针对原来的老项目做技术栈升级工作，升级的主要内容是 react 和 antd。经过讨论，最后采取的技术方案是使用 qiankun。具体实施方案为先基于 qiankun 构建一个主应用，然后再部署一个新的子应用，新的子应用使用最新版本的 react、antd 逐步重…

相信使用过 webpack 的小伙伴，对 tree shaking 功能都不会陌生。tree shaking, 通常用于移除 javascript 上下文中未使用的代码(dead-code)。 tree shaking，可以有效减小最后打包文件的体积。因此在 webpack 打…

本文为稀土掘金技术社区首发签约文章，14天内禁止转载，14天后未获授权禁止转载，侵权必究！ 在上一篇文章 - 我是如何利用持久化缓存策略来提升 Vite 开发模式下首屏性能的? 中，小编给大家展示了如

看过小编上一篇文章 - 简单聊一聊 Vite 开发模式下的缓存策略 童鞋们，想必会记得小编在文章结束时，简单提到了使用类似 Webpack5 的持久缓存策略来优化 Vite 开发模式下的首屏性能。 经

前一段时间，小编在学习完 Vite 之后，写了一篇关于 Webpack 和 Vite 在开发体验上对比的文章 - 为什么有人说 vite 快，有人却说 vite 慢？。文章发布以后，反响非常好，有很多

之前在老项目中尝试接入 Vite 的时候，小编遇到了一个源文件 url 解析的问题。为了解决这个问题，小编自己动手写了一个插件。整个过程可以说是非常顺利，写的插件也达到了预期的目的。

在上一篇文章 如何快速成为一名熟练的 Webpack 配置工程师 - 上篇 中 ，小编完成了对 entry、resolve、module、optimization、output 这 5 个配置项的梳理

相信不少小伙伴都有听说过这样一个名词 - Webpack 配置工程师。😂，都需要设置专门的岗位去维护了，可见 Webpack 的配置是有多么复杂。 现实也确实如此。发展到现在 5.x 版本， Webp

说到构建工具，小编最开始接触的是 Webpack4。后来看到 Vite 大火，又和很多人一样，去研究了一下 Vite。在研究 Vite 的过程中，发现 Vite 内部使用了 Rollup 和 Esbu

之前在 为什么有人说 vite 快，有人却说 vite 慢？ 一文中，我们有提到开发模式下使用 Vite 会有首屏和懒加载性能下降的负面效果，并且在文章的结尾提到了可以通过持久化缓存、prefetch

在上一篇 为什么有人说 vite 快，有人却说 vite 慢？ 中，我们提到过开发模式下使用 Vite 会有首屏性能下降的负面效果。之所以会造成首屏性能下降，一方面是 dev server 需要完成预

谈到 Vite，给人的第一印象就是 dev server 启动速度快。同样规模的项目，相比 Webpack 动辄十几秒甚至几十秒的的启动速度，Vite 简直是快到没朋友，往往数秒之内即可完成启动(PS

谈到目前最🔥的构建工具，那无疑要属 vite 了。vite 以其独特的 nobundle 打包机制，再配合浏览器对 ESM 规范的支持，能给开发人员带来很好的开发体验，越来越受到大家的欢迎。 看到 v

之前在使用 Vite 的时候，经常会遇到这种情况：项目启动以后，不管是首屏还是页面懒加载，如果发现有未进行预构建的第三方依赖，那么 Vite 就会重新预构建，然后触发页面的 reload。重复的页面l

谈到构建工具，大家首先想到的肯定就是 Webpack 以及现在最🔥的 Vite。Webpack，功能强大，生态丰富，从面世到今天，一直是很受大家欢迎；Vite采用