除了之前提到的 Rollup，Vite 工作的时候还用到了另一个打包工具 esbuild
Rollup 用于为生产环境打包，而 esbuild 则用于为开发服务器进行依赖预构建
使用 esbuild
使用 esbuild 进行依赖预构建有两个目的
- 将
CommonJS 代码转为ESM 代码（Vite的开发服务器以ESM方式为浏览器提供源码）
# 并非 vite 真实代码，只是说明此功能的可行性
esbuild app.js --bundle --platform=node --format=esm --outfile=out.js
- 拆分多模块的依赖（浏览器请求 lodash-es 的某个模块时，会同时发出多个请求。预构建将单个模块进行拆分后，仅需要发出一个对这个模块的请求）
// 并非 vite 真实代码，只是说明此功能的可行性
const fs = require('fs');
const path = require('path');
const esbuild = require('esbuild');
const lodashDir = path.join(__dirname, 'node_modules', 'lodash-es');
const outputDir = path.join(__dirname, 'lodash-split');
// 确保输出目录存在
if (!fs.existsSync(outputDir)) {
fs.mkdirSync(outputDir);
}
// 遍历 lodash-es 中的每个模块
fs.readdirSync(lodashDir).forEach(filename => {
if (filename.endsWith('.js')) {
const moduleName = path.basename(filename, '.js');
const inputFile = path.join(lodashDir, filename);
const outputFile = path.join(outputDir, `${moduleName}.js`);
// 使用 esbuild 将每个模块打包为单独的文件
esbuild.buildSync({
entryPoints: [inputFile],
outfile: outputFile,
format: 'cjs',
platform: 'node',
minify: true
});
console.log(`Processed: ${moduleName}`);
}
});
为什么选择 esbuild
esbuild 的优势是极致的速度，所以在开发阶段使用 esbuild 可以获得更好的开发体验。
而rollup 作为一个更成熟的工具（灵活的插件 API 和基础建设），在生产构建中可以提供更了更多的优化和丰富的生态
