vite的预加载
import _ from 'lodash'
vite 在处理过程中会把非绝对路径或者相对路径的引用,会尝试进行路径补全操作。
import _ from 'lodash'// vite 会处理成import _ from '/node_modlues/.vite/lodash'
依赖预构建
首先vite会找到对应的依赖,然后调用esbuild(对js语法进行处理的一个库),将其它规范代码转换成esmodule代码,然后放到当前目录下的node_modlues/.vite/deps
这样做,解决了三个问题:
- 不同的第三方包有不同的导出格式,但vite依赖预构建都给转换成esmodule规范
- 包都导入到了/node_modules/.vite/deps目录下,方便路径重写
- 解决网络多包传输的性能问题,依赖预构建会尽可能的把额外的export和import,最后只生成一个或者几个模块
vite 配置
建议建立vite.base.config.js 基础配置,vite.dev.config.js 开发环境配置,vite.prod.config.js 生产环境配置 vite.config.js 项目配置入口。如下:
- 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]();
});
- vite.base.config.js
import { defineConfig } from "vite";export default defineConfig({});
- vite.dev.config.js
import { defineConfig } from "vite";export default defineConfig({});
- vite.prod.config.js
import { defineConfig } from "vite";export default defineConfig({});