『前端风云』Vite Webpack 恩怨史

Vite Webpack 恩怨史

这篇文章总结自掘金社区的一篇优质科普文章，参考链接附于文章尾部。

本文按照如下顺序阐述了Vite Webpack等前端构建工具的发展。

Vite是什么？

Vite是一种新型的前端构建工具，由Vue的作者尤大开发。

Webpack是什么？

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具

Webpack是打包工具。

为什么要打包？

随着前端项目的复杂度升级，代码规范和管理就必须要同步提升。于是，编程社区中开始提出多种模块化规范，服务端选择了 CommonJS 规范，客户端选择AMD规范，均为JS编程却有两种不同的模块化规范，在JS语言层面显然还不够。

后来在ES6中，ECMA委员会推出了语言层面模块系统：ES Modules 规范。

目前编程已广泛使用ES Modules规范，后端依然使用CommonJS规范较多，但是NodeJS方面逐渐趋向于ES Modules规范。

模块化可以帮助我们更好地解决复杂应用开发过程中的代码组织问题，但是随着模块化思想的引入，我们的前端应用又会产生了一些新的问题，比如：

• ES Modules模块系统的环境兼容问题
• 零散的模块文件导致的频繁网络请求发送
• 模块化发散问题
  HTML CSS等资源文件可能也会模块化

模块化对于开发过程而言是必要的，所以我们便需要在模块化的基础上引入更好的方案或工具，去解决上面提出的三个问题。

因此，以Webpack为首的打包工具出现了。

可以简单总结为：

项目越发复杂—>模块化规范出现—>带来三个问题—>打包工具出现

Vite解决了Webpack的什么问题？

新的工具的出现，一定是为了解决现有工具存在的问题，那么Vite是如何解决上述三个问题的？

• 快速冷启动 按需编译

Vue脚手架工具vue-cli使用Webpack进行打包，开发时可以启动本地开发服务器，实时预览。但由于要对整个项目文件进行打包，所以启动缓慢。

Vite只启动一台静态页面的服务器，不打包文件代码，服务器根据客户端的请求加载不同的模块处理，实现按需加载。

• 模块热更新(Hot Module Replacement)

Webpack的热更新以当前修改的文件为入口重新build打包，所有涉及到的依赖都会被重新加载一次。

Vite采用立即编译当前修改文件的办法，同时使用缓存机制(http缓存—>Vite内置缓存)，加载更新后的文件内容。

参考

一篇很棒的Vite科普文，从技术发展角度讲述了打包工具Webpack出现的原因，同时阐述其存在的问题，以引出Vite的出世。

尤雨溪 3 天 10 更的 Vite 究竟有什么魔力？