webpack & vite 打包原理对比

vite 在，在生产环境中，采用了rollup进行打包。而在开发中是一个基于浏览器原生 ES Modules 的开发服务器。利用浏览器去解析模块，在服务器端按需编译返回，跳过了打包这个概念，解决了webpack在大型项目中启动慢的问题。

1.服务器启动对比
使用webpack这类基于打包方式的启动，需要将所有模块打包成一个或多个bundle，交给服务器运行，如下图所示

而vite，一个基于浏览器原生 ES Module 的开发服务器。利用浏览器去解析模块，只有用到的模块，才会加载进来，没有用到模块，不会参与构建的过程，实现了真正的按需加载，跳过了打包这个概念，有着快速响应速度。同时vite基于esbuild 进行预构建依赖的，esbuild 使用 go 编写，相比于用js编写的打包器快至少10倍-100倍。

2.热更新
使用webpack中，如果一行代码进行了修改，webpack需要重新进行打包，才能运行。随着项目的增大，热更新需要的时间也就越长。

vite利用esbuild进行构建的，相比于有微小修改就需要整个项目全部打包的webpack，只需重新处理有修改的模块，在小型项目中，相差不大，但是在大型项目中，热更新速度可以达到webpack的10倍，甚至更多。

3.vite的不足
vite的相关生态还不够完善，要想完全替代webpack，相关工具还需再加完善。