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
最新资源