vite和webpack对比

定位分析

打包工具:webpackrollupparcelesbuild

作用:可以对代码进行压缩、合并、转换、分割、打包

衍生:vue-clicreate-react-appumi 等是基于 webpack 的上层封装,用于快速创建项目

vite:开发环境依赖 esbuild 进行预构建,生产环境则依赖 rollup 进行打包

差异分析

启动差异

webpackwebpack 会根据我们配置文件(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 打包器相比于 WebpackRollup 要小巧的多,打包生成的文件更小更快。vite 正是基于 es module 的特性实现的,所以使用 rollup 要更合适一些。

vite 为什么不用 esbuild 打包

Vite 目前的插件 API 与使用 esbuild 作为打包器并不兼容,rollup 插件 api 与基础建设更加完善,生产环境 vite 使用 rollup 打包会更稳定一些。 如果后面 esbuild 基础建设与生态更加完善后,esbuild 还是更有优势的。 所以使用 vite 可能会带来开发环境与生产环境打包结果不一致的问题。

使用差异

webpack:使用 webpack 自己去搭建项目脚手架时,需要配置比较多的东西, 比如:跨域、代码压缩、代码分割、css 预处理器的代码转换、样式兼容性、vue/react 代码解析、图片压缩、代码热更新、es 降级、ts 转换等等,我们需要了解各种 loaderplugin 的使用,并且需要根据项目场景,对配置不断进行优化 所以就出现了一些基于 webpack 上层封装的脚手架,如:vue-clicreate-react-appumi 等。

vite vite 对我们常用功能都做了内置,比如:css 预处理器、html 预处理器、hash 命名、异步加载、分包、压缩、HMR 等等,我们可以很轻松的通过配置项去配置

Webpackloaderplugin 已经非常成熟,社区较为丰富,但是,Vite 的生态还相对落后,但正在逐渐发展。

posted @   有些东西学不会  阅读(557)  评论(0编辑  收藏  举报
// 侧边栏目录 // https://blog-static.cnblogs.com/files/douzujun/marvin.nav.my1502.css
点击右上角即可分享
微信分享提示