vite.config.js 打包配置
时间: 2025-01-09 17:33:07 浏览: 94
### 关于 `vite.config.js` 打包配置的方法
在 `vite.config.js` 中,打包配置主要集中在 `build` 字段下。此字段允许开发者定制最终构建产物的行为和特性[^1]。
#### 基础打包配置实例
下面是一个基础的 `vite.config.js` 文件中的打包配置示例:
```javascript
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
build: {
outDir: 'dist', // 输出目录,默认为 dist
assetsDir: 'assets', // 静态资源目录,默认为 assets
sourcemap: false, // 是否生成 source map 文件
rollupOptions: {
input: './src/main.js',
output: {
entryFileNames: '[name].js',
chunkFileNames: '[name]-[hash].js',
assetFileNames: '[name].[ext]'
}
},
minify: 'esbuild' // 使用 esbuild 进行压缩,可选 terser 或者 esbuild
}
});
```
#### 自定义优化选项
为了进一步优化生产环境下的性能表现,在 `rollupOptions.output` 下还可以添加更多参数来控制如何处理代码分割、懒加载等功能。
```javascript
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0];
}
}
}
```
上述代码实现了基于模块路径自动创建 vendor chunks 的功能,有助于减少重复依赖并提高缓存效率。
阅读全文
相关推荐
















