Webpack和Vite

Webpack和vite都是现代化打包工具

为什么vite快

vite是基于esbuild预构建依赖,而esbuild是go语言编写,因为go语言的效率更高,所以vite比用js编写的打包器快10倍

webpack原理

vite原理图

webpack

过程

分析依赖=>编译打包=>交给本地服务器进行渲染.首先分析各个模块之间的依赖,然后进行打包,在启动webpack-dev-server请求时,直接显式打包结果.

webpack打包之后存在的问题随着模块的增多，会造成打出的 bundle 体积过大，进而会造成热更新速度明显拖慢。

vite

启动服务器=>请求模块时按需动态编译显示,是先启动开发服务器,请求某个模块时,再对该模块进行实时编译,因为现代浏览器本身支持es-Module,所以会自动向依赖的Module发出请求.所以vite就将环境下的模块文件作为浏览器执行文件,而不是像webpack进行打包后交给本地服务器

为什么快

分析了webpack和vite的打包方式后,就明白了了vite为什么比webpack打包快,因为在确定时候不需要打包,所以不用分析与模块之间的依赖关系,不用进行编译,这种方式就类似于我们在请求某个ui框架的时候,可以对其进行按需加载,当浏览器请求某个模块时,在根据需要对模块的内容进行编译.按需动态编译可缩短编译时间,当项目越复杂,模块越多的情况下,vite明显优于webpakc

热更新方面,效率更高,当改动了某个模块时,也只用让浏览器重新请求该模块,不需要像webpack那样将模块依赖的模块全部编译一次