上海网站建设与设计公司,电商网站开发主要设计内容,phpnow 搭建本地网站,WordPress文章不置顶1. 定位
webpack、rollup、esbuild 都是打包工具#xff0c;对代码进行压缩、合并、转换、分割、打包等操作#xff0c;都需要打包工具去完成
vue-cli、umi 是基于 webpack 的上层封装#xff0c;通过简单配置能快速搭建起一个项目#xff08;用 webpack 去搭建项目需要配…1. 定位
webpack、rollup、esbuild 都是打包工具对代码进行压缩、合并、转换、分割、打包等操作都需要打包工具去完成
vue-cli、umi 是基于 webpack 的上层封装通过简单配置能快速搭建起一个项目用 webpack 去搭建项目需要配置很多东西
vite 开发环境依赖 esbuild 进行预构建生产环境依赖 rollup 进行打包并且充分利用浏览器特性比如 http2、ES module是站在众多巨人肩膀上的一个产物
2. 运行原理
webpack 启动项目时它会根据配置文件 webpack.config.js 中的入口文件 entry分析项目的依赖关系然后打包成一个文件 bundle.js交给浏览器去加载渲染
问题项目越大需要打包的东西就越多启动的时间也就越长 vite 运行项目时会用 esbuild 进行预构建将所有模块转换成 es module不需要对整个项目进行编译打包而是在浏览器需要加载某个模块时拦截请求根据请求进行按需编译然后再返回给浏览器
绝大多数浏览器已经支持 ES Modules在 script 标签中添加 type“module”就可以使用了
这样一来首次启动项目冷启动时就把 webpack 快很多并且项目大小对 vite 启动速度的影响很小 Q什么是 ES Modules
ES Modules 是个模块化方案在浏览器端和 node.js 环境中组织和管理代码有以下特点
1允许将代码分割成多个模块每个模块可以独立定义自己的作用域和功能通过使用 import 和 export 语句来实现模块之间的依赖关系和数据交互
2采用静态加载机制模块的依赖关系在编译时就已经确定了模块的加载是同步的
3. 构建方式
webpack 是基于 node.js 运行的但 js 只能单线程运行无法利用多核 CPU 的优势 vite 预构建和按需编译过程都是使用 esbuild 完成的
esbuild 是用 go 语言编写的可以充分利用多核 CPU 的优势 Q什么是预构建依赖
在项目启动或构建之前对项目所需的依赖进行预先的处理或构建
好处在实际运行时直接使用已经构建好的依赖提高运行速度
4. http2
http1 的时候浏览器对同一个域名的请求有并发限制一般为 6 个超过 6 个就会造成阻塞所以要减少打包数量减少并发请求来提高速度
http2 就可以并发发送多个请求没有并发限制将打包产物分为多个小模块并行去加载反而更快
vite 充分利用 http2 可以并发请求的优势对项目进行合理拆分访问时同时加载多个模块来提高速度
5. 热更新 HMR
热更新 HMR在程序运行过程中替换、添加或删除模块而无需重新加载整个页面
每次修改文件webpack 都会对整个项目进行重新打包对大项目来说很不友好。即使有缓存机制也不能根本解决问题 vite 项目中监听到文件变更后会用 websocket 通知浏览器重新发送新的请求只对该模块进行重新编译然后进行替换
并且基于 es module 的特性vite 利用浏览器的缓存机制针对源码模块进行协商缓存针对依赖模块进行强缓存这样访问速度更快了
6. 生产环境
vite 生产环境下用 rollup 打包它是一款 ES module 打包器与 webpack 相比rollup 要小巧得多打包生成的文件更小
esbuild 打包速度要比 rollup 快但 vite 目前的插件 API 与使用 esbuild 作为打包器并不兼容用 rollup 打包更加稳定所以使用 vite 可能存在开发环境和生产环境打包结果不一致的问题
7. 优缺点
webpack
优点可以更灵活地配置优化项目拥有庞大的插件生态适用于复杂项目
缺点构建速度较慢配置复杂 vite
优点极快的开发构建速度零配置启动原生 ES 模块启动适合小型项目和快速原型开发
缺点插件生态较小不适合复杂项目
