主要组成部分
- 一个开发服务器 他基于原生ES模块 提供了丰富的内建功能 HMR的速度也是非常快的
- 他是使用了rollup打开我们的代码 并且是一个内置于配置的 可以输出生成环境优化过的静态资源
因为现在大部分浏览器都已经支持使用es6的export import的方式导入导出 只需要在script加入type=“module”
这种模式 他会按需导入 它只会请求你使用的方法 不会把未使用的也都下载下来 减轻浏览器发送请求的性能
如果有了有TypeScript、less、vue等代码时，浏览器并不能直接识别；就要使用打包编译工具了
基于这个理念 viet核心原理就是：
vite也会创建一个本地服务器 使用Connect服务器（webpack用的是express 他在请求服务器静态资源的会直接吧.ts .less文件直接请求到了Connect服务器的时候 他会把这些请求下来的代码 转换成ES6的esMoudle包裹起来 js代码带把转换的代码返回给浏览器 Connect他实际上就是善于做转发的 并且他在使用ESBuild来进行编译的
vite对vue提供了第一优先级支持
vue3 单文件组件支持 :@vite.js/plugin-vue
vue3 jsx支持：@vite/plugin-vue-jsx
vue2 支持 underfin/vite-plugin-vue2
webpack 无法避免的问题
- 本地开发环境每次启动打包的时候webpack是需要先打包的 编译代码 然后浏览器运行的是打包后的bundle文件 所以他的代码量会很大就会有启服务很慢的现象
- 热更新 ：webpack的热更新他每次都会以修改的文件为入口重新进行build打包 所以涉及到的依赖都会重新被加载一次 虽然webpack也采用了局部热更新并且还加入了缓存机制 但是重新打包因为代码量过大 还是会有卡顿的现象
vite 它具有快速冷启动，按需编译，模块热替换
- vite通过一开始就会讲应用中的模块区分为 依赖和源码 两个部分 并且vite他会有个预打包的过程 就是第一次他会吧所需要的依赖/第三方库（会根据package.json） 都会打包到node_module文件夹下面有个.vite文件 当再次打包的时候他先回检查上一次打包的文件是否有被修改 如果有修改才会重新打包依赖/第三方库 如果没有修改 他不会打包。直接打包咱们的业务代码 并且他使用了ESbuild
- 他内部使用的是go语言编写的 go语言最大的特征就是可以直接把代码转换成字节码 返回给浏览器解析 2. 并且ESbuild是可以充分利用cpu多核 分得多个进程运行代码 尽可能让他们饱和运行
- ESbuild所有代码都是从0编写 没有依赖任何第三方 所以性能方面也是ok的
-
快速冷启动 他最开始会只启动一台静态页面的服务器Connect服务器 对文件代码不打包 服务器会根据客户端的请求加载不同的模块处理（利用了浏览器对esMoudle原生支持） 所以对于webpack节省了那一套打包转换封装的过程
-
并且他还加入了浏览器缓存 解析后的依赖请求会以HTTP头
max-age=31536000,immutable强缓存 以提高开发时候页面重新加载的性能 并且一旦缓存了 再次使用时候 请求永远就不会到达开发服务器
但是vite也有慢的地方
- 首屏渲染性能 和懒加载上
- 因为vite的unbundle的机制 在首屏渲染期间需要额外做工作
- 不对源文件合并捆绑操作 导致大量的http请求
- 在获取到所需要代码 需要进行给它们转换 转换
- 预构建和二次构建操作也会阻止首屏请求 直到构建完成
- 不过首屏性能差只发生在
dev server启动以后第一次加载页面时发生。之后再reload页面时，首屏性能会好很多。原因是dev server会将之前已经完成转换的内容缓存起来
