企业官网建设流程全解析

Webpack会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。

而Vite是直接启动开发服务器，请求哪个模块再对该模块进行实时编译。

由于现代浏览器本身就支持ES Module，会自动向依赖的Module发出请求。Vite充分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像Webpack那样进行打包合并。

由于Vite在启动的时候不需要打包，也就意味着不需要分析模块的依赖，不需要编译，因此启动速度非常快。

当浏览器请求某个模块时，再根据需要对模块内容进行编译。这种按需动态编译的方式，极大的缩短了编译时间，项目越复杂，模块越多，Vite的优势越明显。

在HMR方面，当改动一个模块后，仅需让浏览器重新请求该模块即可，不像Webpack那样需要把该模块的相关依赖全部重新编译一次，效率更高。

当需要打包到生产环境时，Vite使用传统的rollup进行打包，因此Vite的优势主要在开发阶段。另外由于Vite利用的是ES Module，因此在代码中不可以使用CommonJS（不可以使用require)。