浅析Vite

薇薇 / 119 /

ChatGPT 可用网址,仅供交流学习使用,如对您有所帮助,请收藏并推荐给需要的朋友。
https://ckai.xyz

构建工具概念及作用

打包:将我们写的浏览器不认识的代码处理的过程就叫做打包,打包完成以后会给我们一个浏览器可以认识的文件。

构建工具做的工作

1.模块化开发支持:支持直接从node_modules里引入代码 + 多种模块化支持;
2.处理代码兼容性:比如babel语法降级,less,ts 语法转换(不是构建工具做的,构建工具将这些语法对应的处理工具集成进来自动化处理);
3.提高项目性能:压缩文件,代码分割;
4.优化开发体验:
热更新:构建工具会帮你自动监听文件的变化,当文件变化以后自动帮你调用对应的集成工具进行重新打包,然后再浏览器重新运行(整个过程叫做热更新,hot replacement);
跨域问题:解决开发服务器跨域的问题,用react-cli create-react-element vue-cli 解决跨域的问题。

webpack和vite对比

webpack需要先把依赖解析完,才开启服务器Vite先开启服务器,按需解析依赖。
因为webpack支持多种模块化,他一开始必须要统一模块化代码,所以意味着他需要将所有的依赖全部读一遍;
vite是基于es modules的,侧重点不一样,webpack更多的关注兼容性,而vite关注浏览器端的开发体验。
image.png

Vite做了哪些工作

依赖预构建
首先vite会找到对应的依赖,然后调用esbuild(对JS语法进行处理的一个库),将其他规范的代码转换成esmodule规范,然后放到当前目录下的node_modules/.vite/deps,同时对esmodule规范的各个模块进行统一集成
1. 将文件转为标准格式;

  1. 路径转为统一路径;
  2. 引入第三方文件import改到index.js中,避免浏览器加载。

依赖预构建解决了3个问题:
1. 不同的第三方包会有不同的导出格式(vite没法的束人家);

  1. 对路径的处理上可以直接使用.vite/deps,方便路径重写;
  2. 网络多包传输的性能问题(也是原生esmodule规范不敢支持node_modules的原因之一),有了依赖预构建无论有多少个额外的export和import,vite都会尽可能的将他们进行集成,最后只生成一个或者几个模块。
//js文件
export {  default as a } from '.a.js'
//vite重写后
function a( ){
}

vite处理.vue文件

服务端遇到了以 vue 后缀结尾的文件时,在服务端会去读取这个文件,然后去查找 template,script 等关键字,最后以字符串的形式去处理截取替换等,然后最重要的是在返回的时候 设置相应类型,最后让浏览器强制以 js 的形式去处理。

https://juejin.cn/post/7172119422562205710

vite处理css

vite天生就支持对css文件的直接处理。
1. vite在读取到main.js中引用到了index.css;

  1. 直接去使用fs模块去读取index.css中文件内容;
  2. 直接创建一个style标签,将index.css中文件内容直接copy进style标签里;
  3. 将style标签插入到index.html的head中;
  4. 将该css文件中的内容直接替换为js脚本(方便热更新或者css模块化),同时设置Content-Type为js,让浏览器以JS脚本的形式来执行该css后缀的文件。

ps:
类名重复样式会被覆盖,cssmodule解决这个问题。
1.module.css (module是一种约定,表示需要开启css模块化);
2.将你的所有类名进行一定规则的替换(将footer 替换成 _footer_i22st_1);
3.同时创建一个映射对象( footer:"_footer_122st_1”};
4.将替换过后的内容塞进stye标签用然后放入到head标签中 (能够读到index,html的文件内容);
5.将componentA.module.css内容进行全部抹除,替换成JS脚本;
6.将创建的映射对象在脚本中进行默认导出。

vite配置

(1)Dotenv
服务端:
读取您的文件,解析内容,将其分配给process.env, 并返回一个 Object,其中包含包含加载内容的键或失败的键Vite项目中引入dotenv import * as dotenv from 'dotenv';
dotenv 会自动把命名为.env.*(用于区分当前运行环境,生产环境、开发环境...)文件中名称以VITE开头的属性放入process.env并会根据package.json运行指令判断拿去对应文件内容。
客户端:
Vite 在一个特殊的 import.meta.env 对象上暴露环境变量,默认识别VITE开头的。envPrefix:'ENV',配置前缀ENV(VITE)开头的被import.meta.env识别 

待调研

(1)热更新;(2)Webpack编译原理;(3)Esmodule;(4)Npm i -D -s(5)Package.json scripts(6)Rollup vite生产环境打包库(7)process.cwd方法: 返回当前node进程的工作目录

参考

(1).https://www.bilibili.com/video/BV1GN4y1M7P5/?p=10&spm_id_from...

作者
薇薇
许可协议
CC BY 4.0
发布于
2023-08-27
修改于
2024-12-22
Bonnie image
尚未登录