❤Vite的认识和使用
1、认识vite
vite是前端的构建工具,和webpack类似,是一个 web 开发构建工具,由于其原生 ES 模块导入方式,可以实现闪电般的冷服务器启动。
官网
旧方式
冷启动开发服务器时,基于打包器的方式启动必须优先抓取并构建你的整个应用,然后才能提供服务
vite提供的新方式
通过在一开始将应用中的模块区分为 依赖 和 源码 两类,改进了开发服务器启动时间
2、vite优点(快的原因 vite / wedpack 的打包原理)
webpack打包原理
vite打包原理
对比上面的图可以发现,我觉得Vite做的思想方面其实是
从以前的全部加载转化为现在只是加载所需要的部分
依赖方面:
极速的服务启动,使用原生 ESM 文件,无需打包
在开发时大多依赖不会变为纯 JavaScript,一些较大的依赖(例如有上百个模块的组件库)处理的代价很高,存在多种模块化格式(例如 ESM 或者 CommonJS)。
esbuild简介
esbuild 使用 Go 编写,并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。
源码 方面:
通常包含一些并非直接是 JavaScript 的文件,需要转换(例如 JSX,CSS 或者 Vue/Svelte 组件),时常会被编辑。不是所有的源码都需要同时被加载(例如基于路由拆分的代码模块)。
Vite 以 原生 ESM 方式提供源码。
这实际上是让浏览器接管了打包程序的部分工作:Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码,即只在当前屏幕上实际使用时才会被处理
ESM简介
在早期,JavaScript程序很小,用来你的 web 页面需要的地方提供一定交互,所以不需要多大的脚本。
随着JavaScript程序越来越复杂,需要一种将 JavaScript 程序拆分为可按需导入的单独模块的机制,著名的 CommonJS 和 AMD 诞生了。前者主要用于服务端,后者则是用于浏览器。
ES6的到来,JavaScript原生模块(ES Module)也正式在浏览器登场。
ES Module(简称ESM),就是原生浏览器支持 import 和 export 等 ES6 特性它依赖于 import 和 export 命令,
开发的时候用到过 type=“module” 这个类型,直接指定 type 的类型就可以在现代浏览器上使用 ESM 模块
vite劣势
生态不及webpack,加载器、插件不够丰富
打包到生产环境时,vite使用传统的 rollup(也可以自己手动安装webpack来)进行打包
项目的开发浏览器要支持 ES Module,而且不能识别 CommonJS 语法
3、 vite的打包过程
Vite在开发环境中使用即时编译,实现了快速的启动和热重载;
而在生产环境中使用Rollup进行打包,和优化,生成最终的静态资源文件,以便于部署到Web服务器上。
开发环境(Development):
启动Vite开发服务器:运行npm run dev或类似的命令启动Vite开发服务器。
即时编译:当您访问应用程序的入口文件(如index.html或.vue文件)时,Vite会解析这些文件并根据其中的导入关系进行即时编译。每个模块都会被编译为单独的JavaScript文件,并通过WebSocket与浏览器保持连接。
热模块替换(HMR):Vite支持热模块替换,可以实时查看和应用代码的更改,而无需刷新整个页面。
生产环境(Production):
构建应用程序:运行npm run build或类似的命令,Vite会执行构建过程。
Rollup打包:Vite在生产环境中使用Rollup进行打包,Rollup是一个强大的JavaScript模块打包器,将应用程序中的所有模块打包成一个或多个bundle文件,以便在生产环境中使用。
代码压缩和优化:Rollup可以对代码进行压缩和优化,例如删除未使用的代码、合并模块等,以减少最终生成的代码的大小。
生成最终的静态资源:在打包完成后,Vite会生成最终的静态资源文件,包括JavaScript文件、CSS文件和其他静态文件,这些文件可以直接部署到Web服务器上。
4、Vite相比于Webpack优势
优化的构建,可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建
本地开发的构建速度快,由于Vite是基于
ESM
和esbuild
的,所以在本地开发时整体的构建速度会比webpack
更快使用简单,Vite内置了很多
loader
和配置,让开发者可以零配置跑起来一个项目,而webpack
则是需要写很多复杂的配置
5、Vite的热更新原理
轻量快速的热重载,无论应用程序大小如何,都始终极快的模块热重载(HMR)
Vite 的热更新主要依赖于 ES Module 的动态导入特性、模块热替换机制、WebSocket通信以及开发服务器,Vite 能够实现,从而实现快速、实时地将代码变化推送到浏览器端,高效的热更新
在开发阶段,运行 vite 命令,会启动一个开发服务器,vite 在开发阶段是一个服务器.
依赖 esm: vite 在开发阶段使用 esm 作为开发时的模块系统。
esm 具有动态导入的能力,这使得在代码中引入模块时可以动态地加载新的模块,从而实现了热更新。
HMR 机制:vite 利用了 webpack等构件工具中常用的热模块替换机制,在代码发生变化时,只将修改的模块动态的注入到运行中的应用程序中,不需要刷新整个页面,从而实现热更新。
使用websocket进行通信:vite 使用了 websocket 在开发服务器和浏览器之间建立了一个持久的双向通信通过。通过这个通道,vite 能够实时的将代码推送给浏览器,使浏览器可以及时的获取到代码变化,并进行热更新。
开发服务器创建 websocket 并监听文件变化,并给客户端发送消息,客户端有一个 js 文件(/@vite/client)也创建 websocket ,用来接收开发服务器的消息,这个 js 文件,在项目启动阶段,会注入到入口文件 index.html 中,从而实现模块的热更新。
开发服务器:vite 提供了一个基于 koa 的开发服务器,这个服务器会监控系统中文件的变化,并在文件发生变化时触发重新构建和热更新。通过这个开发服务器,开发者可以在开发过程中实时地查看代码的变化效果。
6、 良好扩展
vite 对 TypeScript、JSX、CSS 等支持开箱即用
通用的插件,在开发和构建之间共享 Rollup-superset 插件接口
完全类型化的API,灵活的 API 和完整 TypeScript 类型
7、使用
创建项目
npm init vite-app <project-name>
运行项目:
$ cd ....
npm install
npm run dev
项目打包
npm run build
原文链接:https://juejin.cn/post/7345407067413217315 作者:林太白