vite依赖预构建

为什么要进行依赖预构建，vite是基于esm。其他导入导出方式需要进行转换，转换成vite可识别的模块。

vite处理路径方式

在vite处理过程中，如果是非绝对/相对路径，会尝试开启路径补全

import _ from '/node_modules/.vite/lodash'

查找依赖的过程是当前目录一次向上查找，查找到搜寻根目录或者搜寻到依赖为止。

生产和开发：

• yarn dev 每次依赖预构建所重新构建的相对路径都是正确
• vite会交给rollup 库完成生产的打包

---

问题： commonjs规范 module.exports 导出 ，vite就不认识。

依赖预构建，首先vite查找到对应的依赖，然后调用esbuild（对js语法进行处理，重新打包成esm规范）放到当前目录下的node_modules/.vite/deps目录下。同时对esmodule规范的各个模板进行统一集成。

---

解决了什么问题：

1. 不同的第三方包导出不同的格式 ——>esm
2. 解决路径问题，可以直接使用node_modules/.vite/deps，方便路径重写
3. 网络多包传输的性能问题（也是原生esm不支持node_modules的原因之一），有了依赖预构建不管有多少import/export，vite都尽可能的进行集成，最后生成一两个模块

针对3，进行案例说明：

安装 yarn add lodash-es

// main.js
import lodashEs from "lodash-es";
console.log("打印***counter", counter);
console.log("打印***lodashEs", lodashEs);

lodash-es 本身导出

vite重写后的导出

vite重写后，就不再需要加载lodash的其他依赖。

export default function add { }

export { default as add  } from './add'
//等价于
import  add from './add'
export const add = add

//vite重写后 直接变成
function add(){}

如何不进行依赖预构建

vite.config.js

export default {
  optimizeDeps: {
    exclude: ["lodash-es"], // 不进行依赖预构建
  },
};

网络传输消耗非常大，问题非常大，这就是原生不支持的原因