vite依赖预构建与配置文件

vite的预加载

import _ from 'lodash'

vite 在处理过程中会把非绝对路径或者相对路径的引用，会尝试进行路径补全操作。

import _ from 'lodash'

// vite 会处理成

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

依赖预构建

首先vite会找到对应的依赖，然后调用esbuild（对js语法进行处理的一个库），将其它规范代码转换成esmodule代码，然后放到当前目录下的node_modlues/.vite/deps

这样做，解决了三个问题：

1. 不同的第三方包有不同的导出格式，但vite依赖预构建都给转换成esmodule规范
2. 包都导入到了/node_modules/.vite/deps目录下，方便路径重写
3. 解决网络多包传输的性能问题，依赖预构建会尽可能的把额外的export和import，最后只生成一个或者几个模块

vite 配置

建议建立vite.base.config.js 基础配置，vite.dev.config.js 开发环境配置，vite.prod.config.js 生产环境配置 vite.config.js 项目配置入口。如下：

1. vite.config.js

import { defineConfig } from "vite";

import baseConfig from "./vite.base.config";
import devConfig from "./vite.dev.config";
import prodConfig from "./vite.prod.config";

// 尽量不要写if else 这种语句
const envConfig = {
  // 生产环境配置
  build: () => {
    console.log("生产环境");
    return { ...baseConfig, ...prodConfig };
  },
  // 开发环境配置
  serve: () => {
    console.log("开发环境");
    return { ...baseConfig, ...devConfig };
  },
};

export default defineConfig(({ command }) => {
  console.log("command", command);
  return envConfig[command]();
});

2. vite.base.config.js

import { defineConfig } from "vite";

export default defineConfig({});

3. vite.dev.config.js

import { defineConfig } from "vite";

export default defineConfig({});

4. vite.prod.config.js

import { defineConfig } from "vite";

export default defineConfig({});