02- Vite的依赖预构建（学习vite打包工具的笔记)

一、vite的预加载

做了什么(开发环境)

1. 路径补全

   before：
   import _ from "lodash"; // lodash可能也import了其他的东西
   after：
   import __vite__cjsImport0_lodash from "/node_modules/.vite/deps/lodash.js?v=ebe57916";
   
   1.在处理的过程中如果说看到了有非绝对路径或者相对路径的引用, 他则会尝试开启路径补全
   2.找寻依赖的过程是自当前目录依次向上查找的过程, 直到搜寻到电脑根目录如:C盘，搜寻到对应依赖为止 /user/node_modules/lodash, ../
   

做了什么(生产环境)

1. 依赖预构建

   // 做了什么
   1.vite会找到对应的依赖
   2.调用esbuild(对js语法进行处理的一个库), 将其他规范的代码转换成esmodule规范,
   3.放到当前目录下的node_modules/.vite/deps, 同时对esmodule规范的各个模块进行统一集成 
   
   // 解决问题
   1.不同的第三方包会有不同的导出格式(这个是vite没法约束人家的事情)
   2.对路径的处理上可以直接使用.vite/deps, 方便路径重写
   3.叫做网络多包传输的性能问题(也是原生esmodule规范不敢支持node_modules的原因之一), 有了依赖预构建以后无论他有多少的额外export 和import, vite都会尽可能的将他们进行集成最后只生成一个或者几个模块