vite和webpack对比
定位分析
打包工具:webpack
、rollup
、parcel
、esbuild
作用:可以对代码进行压缩、合并、转换、分割、打包
衍生:vue-cli
、create-react-app
、umi
等是基于 webpack
的上层封装,用于快速创建项目
vite
:开发环境依赖 esbuild
进行预构建,生产环境则依赖 rollup
进行打包
差异分析
启动差异
webpack:webpack
会根据我们配置文件(webpack.config.js
) 中的入口文件(entry
),分析出项目项目所有依赖关系,会将所有文件编译一遍,无论模块是否被执行,项目复杂度越增加,启动时间就越长。然后打包成一个文件(bundle.js
),交给浏览器去加载渲染。
bundle.js:是可以被浏览器认识的,拿来即可直接运行的 js
文件。bundle.js
的本质是一个立即执行函数,这个函数的输入是依赖拓补图(一个 js 对象),没有输出。内部会按照依赖顺序,依次以 eval(code)
的形式运行代码。
Vite:首先会用 esbuild
进行预构建,将所有模块转换为 es module
,不需要对我们整个项目进行编译打包,而是在浏览器需要加载某个模块时,拦截浏览器发出的请求,根据请求进行按需编译,然后返回给浏览器。
es module:使用 import
用于导入模块, export
用于导出模块。模块内部的变量和函数默认是私有的,不会污染全局作用域,浏览器遇到内部的 import
引用时,会自动发起 http
请求,去加载对应的模块。
底层差异
webpack:基于 nodejs
运行的,由于 js
只能单线程运行,无法利用多核 CPU 的优势,当项目越来越大时,构建速度也就越来越慢了。
vite 基于 esbuild:基于 Go
语言,可以充分利用多核 CPU 的优势,它在构建依赖的速度上比使用 JavaScript
编写的打包器快 10-100 倍。
vite 基于 http2:可以并发请求,在之前 http1
的时候,浏览器对同一个域名的请求,是有并发限制的,一般为 6 个,如果并发请求 6 个以上,就会造成阻塞问题,所以在 http1
的时代,我们要减少打包产物的文件数量,减少并发请求,来提高项目的加载速度。2015 年以后,http2
出现了且没有并发限制。这时候,将打包产物分成多个小模块,并行去加载。vite
也充分利用了这一优势,对项目资源进行了合理的拆分,访问项目时,同时加载多个模块,来提升项目访问速度。
热更新效率
webpack 项目中,每次修改文件,都会对整个项目重新进行打包,虽然 webpack
现在有了缓存机制,但还是无法从根本上解决这个问题。
vite vite
项目中,监听到文件变更后,会用 websocket
通知浏览器,重新发起新的请求,只对该模块进行重新编译,然后进行替换。 并且基于 es module
的特性,vite
利用浏览器的缓存策略,并且做了协商缓存处理,针对依赖模块(第三方库)做了强缓存处理,所以热更新效率高。
打包差异
Rollup 是一款 ES Module
打包器相比于 Webpack
,Rollup
要小巧的多,打包生成的文件更小更快。vite
正是基于 es module
的特性实现的,所以使用 rollup
要更合适一些。
vite 为什么不用 esbuild 打包
Vite
目前的插件 API 与使用 esbuild
作为打包器并不兼容,rollup
插件 api 与基础建设更加完善,生产环境 vite
使用 rollup
打包会更稳定一些。 如果后面 esbuild
基础建设与生态更加完善后,esbuild
还是更有优势的。 所以使用 vite
可能会带来开发环境与生产环境打包结果不一致的问题。
使用差异
webpack:使用 webpack
自己去搭建项目脚手架时,需要配置比较多的东西, 比如:跨域、代码压缩、代码分割、css
预处理器的代码转换、样式兼容性、vue/react
代码解析、图片压缩、代码热更新、es
降级、ts
转换等等,我们需要了解各种 loader
、plugin
的使用,并且需要根据项目场景,对配置不断进行优化 所以就出现了一些基于 webpack
上层封装的脚手架,如:vue-cli
、create-react-app
、umi
等。
vite vite
对我们常用功能都做了内置,比如:css
预处理器、html
预处理器、hash
命名、异步加载、分包、压缩、HMR 等等,我们可以很轻松的通过配置项去配置
Webpack
的 loader
和 plugin
已经非常成熟,社区较为丰富,但是,Vite
的生态还相对落后,但正在逐渐发展。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步