webpack和vite的区别

Posted 2023-04-02 祥哥的说

开发阶段vite的速度远快于webpack，主要是因为：
webpack是先打包再启动开发服务器，vite是直接启动开发服务器，然后按需编译依赖文件。

下面详细来说：

• webpack先打包，再启动开发服务器，请求服务器时直接给予打包后的结果；
• vite直接启动开发服务器，请求哪个模块再对哪个模块进行实时编译；
• 由于现代浏览器本身就支持ES Modules，会主动发起请求去获取所需文件。vite充分利用这点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack先打包，交给浏览器执行的文件是打包后的；
• 由于vite启动的时候不需要打包，也就无需分析模块依赖、编译，所以启动速度非常快。当浏览器请求需要的模块时，再对模块进行编译，这种按需动态编译的模式，极大缩短了编译时间，当项目越大，文件越多时，vite的开发时优势越明显；
• 在HRM方面，当某个模块内容改变时，让浏览器去重新请求该模块即可，而不是像webpack重新将该模块的所有依赖重新编译；
• 当需要打包到生产环境时，vite使用传统的rollup进行打包，所以，vite的优势是体现在开发阶段，另外，由于vite使用的是ES Module，所以代码中不可以使用CommonJs；

什么是vite

Vite (法语意为 "快速的"，发音 /vit/)，新型前端构建工具。

为什么用vite

一句话总结：使用vite构建项目，启动的速度要比使用webpack构建更快。

• 之前浏览器是不支持ES Modules的，为了在让浏览器能够运行我们写的代码（es6语法、.jsx/.vue文件），我们需要使用打包工具，例如webpack，来实现代码的转换和优化的过程；
• 在浏览器支持ES Modules后，import、export、<script type='modules'>等成为vite出现的条件；
• vite 主要对应的场景是开发模式，它只启动一台静态页面的服务器，对文件代码不打包，服务器会根据客户端的请求加载不同的模块处理；
• 底层实现上，Vite 是基于 esbuild 预构建依赖的。当声明一个script标签类型为module时，浏览器将对其内部的import引用发起HTTP请求获取模块内容；
• Vite 劫持了这些请求，并在后端进行相应的处理（如处理.ts文件为.js文件），然后再返回给浏览器；
• 由于浏览器只会对用到的模块发起 HTTP 请求，所以 Vite 没必要对项目里所有的文件先打包后返回，而是只编译浏览器发起 HTTP 请求的模块即可。也就实现了所谓的按需加载。

参考：

webpack和vite的区别 - 简书

vite介绍 ｜ 与其他构建工具做比较，分析vite预构建和热更新的原理 - 掘金

webpack之webpack和vite的区别

 

 

	打包原理	缺点	其他特点
webpack	解析各个模块的依赖关系 使用loader转换文件，使用plugin注入钩子，打包合并模块，最终生成bundle文件，使用express开启本地服务器， 浏览器请求的是bundle文件，也就是打包过后的文件。	1.各个模块之间的依赖关系过于复杂 会导致打包速度很慢 2.使用热更新时，改动一个模块，其他有依赖关系的模块也会重新进行打包
vite	使用koa开启本地服务器，没有webpack那样打包合并的过程，所以启动服务器很快，@vue/compiler-sfc会对模块进行编译 （修改一些引入文件的路径 css编译成js字符串）浏览器再请求编译好的模块。	1.项目的开发浏览器要支持esmodule 2.不能识别commonjs语法	1.使用热更时，改动一个模块，仅需让浏览器重新请求该模块即可  效率更高。 2.需要打包到生产环境时 vite使用的是rollup 3.有利用http2的缓存和压缩