Vite 原理

Vite 原理

谈谈对 vite 的理解 结合 webpack 的改变

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

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

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

• 由于 Vite 在启动的时候不需要打包，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快。当浏览器请求某个模块时，在根据需要对模块进行编译。这种按需动态编译的方式，极大的缩减了编译事件，项目越复杂、模块越多， Vite 的优势越明显。

• 在 HMR（模块热更新替换 -- Hot Module Replacement） 方面，当改动了一个模块后，仅需让浏览器重新请求该模块即可，不像 webpack 那样需要把该模块的相关依赖模块全部编译一次，效率更高。

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