obsidian/笔记文件/2.笔记/vite build.md

#javascript

vite build 是使用 Vite（一个现代化的前端构建工具）进行项目打包的命令，它会将你的前端代码（如 Vue、React、Svelte 或纯 JavaScript/TypeScript 项目）优化并打包成适合生产环境部署的静态文件。

vite build 的作用

1. 代码打包

   • 将源代码（如 .vue、.jsx、.ts 等）编译、压缩并打包成浏览器可直接运行的 HTML、CSS、JS 文件。

   • 默认输出到 dist 目录。

2. 性能优化

   • 代码分割（Code Splitting）：按需加载，减少首屏加载时间。

   • Tree Shaking：移除未使用的代码，减小打包体积。

   • 压缩（Minify）：使用 Terser（JS）和 ESBuild（CSS）压缩代码。

   • 预渲染（Pre-rendering）（如果配置）。

3. 静态资源处理

   • 图片、字体等资源会被优化并放入 dist/assets。

   • 小文件可能被转成 Base64 内联。

（前提是 package.json 的 scripts 里配置了 "build": "vite build"）

输出结果

• 打包后的文件默认生成在 dist/ 目录：

dist/
├── index.html       # 入口 HTML
├── assets/
│   ├── main.js      # 压缩后的 JS
│   ├── style.css    # 压缩后的 CSS
│   └── ...          # 其他资源（图片、字体等）

!

总结

• vite build 是 Vite 的生产环境打包命令，输出优化后的静态文件。

• 比传统工具（如 Webpack）更快，适合现代前端项目。

• 可通过 vite.config.js 自定义打包行为。

如果你的项目基于 Vite，直接运行 npm run build 即可生成生产环境代码！ 🚀