vite 原理图
webpack: 分析依赖=> 编译打包=> 交给本地服务器进行渲染。首先分析各个模块之间的依
赖，然后进行打包，在启动 webpack-dev-server，请求服务器时，直接显示打包结果。webpack
打包之后存在的问题：随着模块的增多，会造成打出的 bundle 体积过大，进而会造成热更
新速度明显拖慢。
vite: 启动服务器=> 请求模块时按需动态编译显示。是先启动开发服务器，请求某个模块时
再对该模块进行实时编译，因为现代游览器本身支持 ES-Module，所以会自动向依赖的
Module 发出请求。所以 vite 就将开发环境下的模块文件作为浏览器的执行文件，而不是像
webpack 进行打包后交给本地服务器。
分析了 webpack 和 vite 的打包方式后，也就明白了为什么 vite 比 webpack 打包快，因为它
在启动的时候不需要打包，所以不用分析模块与模块之间的依赖关系，不用进行编译。这种
方式就类似于我们在使用某个 UI 框架的时候，可以对其进行按需加载。同样的，vite 也是
这种机制，当浏览器请求某个模块时，再根据需要对模块内容进行编译。按需动态编译可以
缩减编译时间，当项目越复杂，模块越多的情况下，vite 明显优于 webpack.
热更新方面，效率更高。当改动了某个模块的时候，也只用让浏览器重新请求该模块，不需
要像 webpack 那样将模块以及模块依赖的模块全部编译一次。
三、优缺点
vite 开发阶段，打包快。
vite 相关生态没有 webpack 完善，vite 可以作为开发的辅助。
评论0
最新资源