从 Bundle 到 Bundless：前端开发工具演化史前端开发工具不断更新，Webpack 和 Vite 作为最受欢

引言

在前端开发的世界中，工具和技术不断更新，Webpack 和 Vite 作为当下最受欢迎的开发工具，它们承载了前端开发不同时代的开发诉求与工程理念。本文我将从 bundle 与 bundless 的定义出发，聊一聊我对 Webpack 与 Vite 的理解，同时带大家重温一遍前端开发工具演化史。

一、Bundle 时代：Webpack 的出现

1.1 什么是 Bundle？

Bundle 是指将多个 JavaScript 文件及其依赖项打包成一个或多个模块化的文件，从而便于浏览器加载和运行。在前端应用中，由于模块化开发的普及，管理众多小文件和依赖就变得十分必要，一些前端应用为了实现复杂的功能可能需要加载数十个甚至数百个JS模块，受限于当年浏览器对于HTTP 1.1 最大并行请求数目的限制，对代码文件打包就成了工程化的必然趋势。

（上图展示的是各版本浏览器当时对于Http请求并发数的调度策略）

1.2 Webpack 的诞生

Webpack 作为一款模块打包工具，于2012年发布，它彻底改变了前端开发的构建流程，它提供了模块化和打包的能力，通过静态依赖关系图来管理模块间的依赖，使得开发者能够专注于模块开发，无需关心最终的文件结构，主要特性如下：

• 模块化：使得 JavaScript、CSS、图片等资源都可以作为模块来处理。
• 代码分割：支持代码分割，可以将应用拆分为多个独立的文件，按需加载，提高性能。
• 插件体系：丰富的插件系统，可以在打包过程中进行各种如代码转换、压缩等复杂处理。

1.3 Webpack 为代表的 Bundle 时代

可以说，Webpack 在过去十余年中，为推动前端模块化开发立下了汗马功劳，通过打包、优化、分割等一系列技术手段，大幅提升了前端开发的效率和性能。然而随着前端应用的日益复杂，开发者对开发体验的要求越发提升，而Webpack复杂冗长的配置，以及老旧的热更机制慢慢开始略显疲态。

二、Bundless 时代：Vite 的崛起

2.1 什么是 Bundless？

Bundless 是指不再将所有模块打包成单一或多个大的文件，而是通过现代浏览器的原生 ES 模块支持，动态加载所需的模块，这样的方式减少了打包和编译过程，同时能显著加快开发环境中的热更新速度。

（基于Bundless思想，浏览器加载JS的模式）

上图中大家可以清晰的看到目前各大浏览器对于ES Module的支持度已经高达 97%，且国内外大厂企业级的项目在 LB 接入层都已经支持 Http 2.0（多路复用等新特性）， 在这样的大背景下，Vite 迅速崛起，bundless 的年代正式到来。

2.2 Vite 的诞生

Vite 是由 Vue.js 的作者尤雨溪开发，于2020年发布的新一代前端构建工具，设计目标是为了解决开发和生产环境的性能问题，针对现代前端开发中的痛点进行了优化，主要特性如下：

• 极速冷启动：利用 ES 模块特性，Vite 可以实现毫秒级的冷启动。
• 按需编译：在浏览器请求模块时才进行编译，开发环境下的热更新速度极快。
• 特性支持：内置支持 TypeScript、JSX、CSS 等现代化开发预处理器。

2.3 Vite 为代表的 Bundless 时代

Vite 通过现代浏览器的能力，将开发体验提升到了一个新的高度，解决了传统打包工具在开发阶段的性能瓶颈，另外Vite 让开发者可以更加专注于业务逻辑的编写，不需要为构建配置和打包耗费大量时间。

三、前端工具的发展历程

3.1 从 Gulp/Grunt 到 Webpack

在 Webpack 诞生之前，Gulp 和 Grunt 是前端构建的主要工具，它们通过任务自动化来处理各种构建任务，但随着应用复杂度增加，Webpack 提出的模块化打包理念逐渐取代了传统的任务自动化工具。

3.2 单页应用（SPA）的兴起

随着 React、Vue、Angular 等前端框架的流行，前端单页应用（SPA）成为一种主流开发模式，这种模式需要大量的模块化管理与优化，这进一步推动了 Webpack 的普及。

3.3 性能与开发体验的新需求

随着 Web 应用功能的复杂化，前端开发者对性能和开发体验提出了更高的要求。这种背景下，Vite 通过利用现代浏览器的能力，简化了构建流程，成为开发工具的新宠儿。

四、学习建议

前端开发者在不同的能力阶段选择合适的工具进行学习尤为重要

4.1 Webpack

• 优点：功能强大、生态成熟、社区支持丰富，适合复杂的应用场景。
• 缺点：配置较复杂，上手难度较高。

4.2 Vite

• 优点：上手简单、开发体验好、性能高效。
• 缺点：生态相对较新，某些插件和功能可能不如 Webpack 丰富。

4.3 建议

• 入门学习：对于当前（2024.7）刚入门的初学者，我建议先从 Vite 开始，利用 Vite 配置简单，使用简单的特点，帮助自己更快的学习前端知识，建立正反馈。

• 深入研究：在掌握了基本的前端开发技能后，建议学习 Webpack 的配置和使用，因为目前Webpack 在大型公司存量项目中依旧是普及度最高的开发工具，掌握它是工程类优化的基础，是一个前端开发者必备的技能。

总结

前端构建工具从 Webpack 到 Vite，代表了前端开发在不同阶段的诉求与理念，Bundle 时代的 Webpack 提供了强大的模块管理和打包能力，而在 Bundless 时代， Vite 则通过简化构建配置，提升开发体验等特性，成为新的时代宠儿。

历史滚滚向前，webpack，vite 都将成为过客，开发者需要提升的其实是工程化思维（即通过使用或设计工具来解决业务难题的能力）