vite为什么要rollup打包而不是webpack

一、vite为什么选择rollup做构建工具

Vite是一个由原生ESM驱动的Web开发构建工具。在选择构建工具的时候也最好可以选择基于ESM的工具。Rollup是基于ES6的JavaScript打包工具。它将小文件打包成一个大文件或者更复杂的库和应用，打包既可用于浏览器和Node.js使用。 Rollup最显著的地方就是能让打包文件体积很小。相比其他JavaScript打包工具，Rollup总能打出更小，更快的包。因为Rollup基于ES6模块，比Webpack使用的CommonJS模块机制更高效。

二、vite为什么不使用rollup的热更新

vite开发模式单独实现了一套热更新，可是从rollup中可以发现，rollup有热更新插件。为什么Vite不用Rollup的热更新呢？

从Vite的README，我们可以发现：

也就是说vite是第一个发布基于纯ESM的热更新。当时rollup还没有纯ESM的热更新。 

三、vite为什么不用webpack

Webpack和rollup功能差不多，有种说法是应用开发用Webpack，库开发用rollup。但是现在Webpack也支持Tree shaking，rollup也有热更新，而且都有强大的插件开发功能。二者的功能差异越来越模糊。

两者更多的区别是体现在写法上：

rollup配置文件 

webpack配置文件 

可以看出：

• rollup使用新的ESM，而Webpack用的是旧的CommonJS。
• rollup支持相对路径，webpack需要使用path模块。

rollup使用起来更简洁，并且rollup打出更小体积的文件，所以rollup更适合vite。

这篇好文章是转载于：学新通技术网