> ## Documentation Index
> Fetch the complete documentation index at: https://docs.go-mizu.dev/llms.txt
> Use this file to discover all available pages before exploring further.
# Build Manifest
> Use build manifests for asset fingerprinting and module preloading.
Build manifests map source files to their output files with content hashes. They enable proper asset loading, module preloading, and template integration.
## What is a Build Manifest?
When Vite or Webpack builds your app, it creates a manifest file:
```json theme={null}
{
"src/main.tsx": {
"file": "assets/main.abc123.js",
"css": ["assets/main.def456.css"],
"imports": ["assets/vendor.xyz789.js"]
},
"src/App.tsx": {
"file": "assets/App.ghi012.js"
}
}
```
This maps `src/main.tsx` → `assets/main.abc123.js`.
## Configuration
```go theme={null}
import "github.com/go-mizu/mizu/frontend"
opts := frontend.Options{
Root: "./dist",
Manifest: ".vite/manifest.json", // Path to manifest
}
```
## Loading a Manifest
```go theme={null}
import (
"embed"
"io/fs"
"github.com/go-mizu/mizu/frontend"
)
//go:embed all:dist
var distFS embed.FS
func setup() {
dist, _ := fs.Sub(distFS, "dist")
// Load manifest
manifest, err := frontend.LoadManifest(dist, ".vite/manifest.json")
if err != nil {
panic(err)
}
// Use in templates
viewHelpers := manifest.ViewHelpers()
// Register helpers with your view engine
}
```
## Manifest API
### Entry Points
Get the output file for an entry:
```go theme={null}
outputFile := manifest.Entry("src/main.tsx")
// Returns: "assets/main.abc123.js"
```
### Assets
Get the URL for an asset:
```go theme={null}
assetURL := manifest.Asset("logo.png")
// Returns: "/assets/logo.abc123.png"
```
### CSS Files
Get CSS files for an entry:
```go theme={null}
cssFiles := manifest.CSS("src/main.tsx")
// Returns: ["assets/main.def456.css"]
```
### Preloads
Get module preloads:
```go theme={null}
preloads := manifest.Preloads("src/main.tsx")
// Returns: ["assets/vendor.xyz789.js", "assets/chunk.abc123.js"]
```
## Template Integration
### View Helpers
```go theme={null}
helpers := manifest.ViewHelpers()
// Available functions:
// - vite_entry: Complete tags (CSS + preloads + script)
// - vite_asset: Asset URL
// - vite_script: Script tag only
// - vite_css: CSS tags only
// - vite_preload: Preload tags only
```
### In Go Templates
```html theme={null}
{{ vite_entry "src/main.tsx" }}
```
Outputs:
```html theme={null}
```
## Manual Tag Generation
### Script Tag
```go theme={null}
scriptTag := manifest.ScriptTag("src/main.tsx")
// Returns:
```
### CSS Tags
```go theme={null}
cssTags := manifest.CSSTags("src/main.tsx")
// Returns:
```
### Preload Tags
```go theme={null}
preloadTags := manifest.PreloadTags("src/main.tsx")
// Returns:
```
### Entry Tags (All in One)
```go theme={null}
allTags := manifest.EntryTags("src/main.tsx")
// Returns: CSS + preloads + script in correct order
```
## Vite Manifest Format
Vite creates `.vite/manifest.json`:
```json theme={null}
{
"src/main.tsx": {
"file": "assets/main.abc123.js",
"src": "src/main.tsx",
"isEntry": true,
"css": ["assets/main.def456.css"],
"imports": ["_vendor.xyz789.js"]
},
"_vendor.xyz789.js": {
"file": "assets/vendor.xyz789.js"
}
}
```
## Webpack Manifest Format
Webpack creates a simpler manifest:
```json theme={null}
{
"main.js": "assets/main.abc123.js",
"main.css": "assets/main.def456.css",
"logo.png": "assets/logo.abc123.png"
}
```
Both formats work with Mizu's manifest loader.
## Benefits
### 1. Correct Asset Loading
Always load the correct hashed file:
```html theme={null}
{{ vite_entry "src/main.tsx" }}
```
### 2. Module Preloading
Improve performance by preloading dependencies:
```html theme={null}
```
Browser loads dependencies in parallel.
### 3. CSS Extraction
Automatically include CSS:
```html theme={null}
```
## Next Steps
Caching strategies
Production optimization