#javascript 

`vite build` 是使用 [Vite](https://vitejs.dev/)（一个现代化的前端构建工具）进行项目打包的命令，它会将你的前端代码（如 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/` 目录：

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

![[Pasted image 20250529181651.png]]

## **总结**

-   `vite build` 是 Vite 的生产环境打包命令，输出优化后的静态文件。
    
-   比传统工具（如 Webpack）更快，适合现代前端项目。
    
-   可通过 `vite.config.js` 自定义打包行为。
    

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