Vite Webpack 恩怨史

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

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

Created with Raphaël 2.2.0 为什么要打包 Webpack打包工具的出现 Vite的出现

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 究竟有什么魔力？

『前端风云』Vite Webpack 恩怨史相关推荐

『前端技术』相比后端是否只能打辅助?
问题来源于知乎提问,截图如下: 前后端如何定义前端生存现状前端的下半场前端的机遇 1. 前后端如何定义? 论坛上人们经常会为前后端的问题展开撕 x 大战,很多时候问题的根源是没有定义好前后端的概 ...
『前端大事记』之「几件大事」
[回复"1024",送你一个特别推送] 不知道大家都听没听说过这句哈:前端的江湖总是不缺话题,且从没有消停过!!! 你要说没听说过,那就对了,这句话是我刚刚说的.但是这句话想必大家 ...
『前端规范化』CSS命名规范化
CSS命名规范化 CSS命名规范化,有利于代码阅读和维护,在大型项目及团队协作开发中有着重要的意义.这里我推荐采用BEM命名规范+适当的语义理解简写.因为BEM命名常常会因为太长而被人诟病,所以适当加 ...
戏说前端 JavaScript 之『防抖节流』基础知识
往事不堪回首犹记在很久之前的某次面试中,和那技术大哥谈的正欢呢,冷不防他来了句:谈一谈防抖和节流吧. 抹了把凉汗,我用颤抖的.不自信的语气回答道:呃,防抖就是应该是防止抖动的意思,节流大概是节省流量 ...
『创意欣赏』60款惊艳的 iOS App 图标设计《第四季》
每天都有大量的应用程序发布到 iOS App Store 上,在数量巨大的应用中想要引起用户的主要,首页的就是独特的图标设计.这篇文章收集了一组惊艳的 iPhone 和 iPad 应用程序图标,希望能 ...
系列 | 漫谈数仓第四篇NO.4 『数据应用』（BIOLAP）
点击上方蓝色字体,置顶/星标哦目前10000+人已关注加入我们本文目录CONTENTS ☞ 01.可视化BI工具 [ 开源BI,商业BI,传统BI ] ☞ 02.OLAP科普 [ ROLAP M ...
Vue的新型前端构建工具Vite怎么用
本文小编为大家详细介绍"Vue的新型前端构建工具Vite怎么用",内容详细,步骤清晰,细节处理妥当,希望这篇"Vue的新型前端构建工具Vite怎么用"文章能帮助 ...
关于『一月の集训』
关于『一月の集训』 A B O U T J A N U A R Y \tt A \ B \ O \ U \ T \quad J \ A\ N\ U\ A\ R \ Y A B O U TJ A N ...
洛谷 2 月月赛 I 『MdOI R4』 (Div2) A ~ D 四题全，也许会有六题，超高质量题解（Div.1E、F下辈子一定补）【每日亿题2 / 9】
整理的算法模板合集: ACM模板点我看算法全家桶系列!!! 实际上是一个全新的精炼模板整合计划目录 A.P7337 『MdOI R4』Fun B.P7338 『MdOI R4』Color C.P7 ...

『前端风云』Vite Webpack 恩怨史