Vite 的依赖预构建

快速识别引入第三方包

浏览器原生识别相对路径或者绝对路径，类似import _ from "lodash"的方式浏览器是无法识别的。

如果浏览器帮我们识别引入，会导致浏览器需要加载非常巨大的依赖文件，会让其速度非常慢！

vite 的功能就是识别第三方包，只需要使用 vite 启动即可（默认去找根目录下的 index.html）。

依赖预加载

前言

vite 能够识别非绝对路径或者相对路径的引用，是因为它进行了路径补全。

vite 会对 lodash 进行预处理，并把它放在了 node_modules/.vite/deps 目录下。

是 vite 在考虑另外一个问题（模块规范兼容性问题）的时候顺便把这个问题解决了！

依赖预构建

浏览器只认识 esmodule 的包，但是在早期的很多包是以 commonjs 规范导出的，所以需要工具来处理这些包。

vite 处理这些包步骤：

1. 找到项目中的依赖包，比如 lodash；
2. 利用 esbuild（对 js 语法进行处理的一个库）将其他规范的代码转换成 esmodule 规范的代码，将其放在 node_modules/.vite/deps 目录下；
3. 将将 esmodule 规范的各个模块进行统一集成导出。

解决问题：

• 统一包为 esmodule 规范，浏览器可以识别。
• 对路径的处理上可以直接使用 .vite/deps，方便路径重写。
• 优化了网络多包传输的性能问题。

关闭依赖预构建

在 vite.config.js 中添加如下配置：

import { defineConfig } from "vite";

export default defineConfig({
  optimizeDeps: {
    exclude: ["lodash-es"],
  },
});

关闭依赖依赖预构建后，访问地址直接在 node_modules 中，浏览器会请求很多依赖文件，这也是原生 esmodule 规范不敢支持直接加载 node_modules 的原因之一。