README.md•3.41 kB
# WebSee Build Intelligence
Build artifact analysis, bundle size optimization, and dependency graph inspection.
## Quick Info
- **Tools**: 5 build analysis tools
- **Category**: Bundle optimization
- **Build Tools**: Webpack (full), Vite (full)
- **Artifacts Required**: stats.json, manifest.json
- **Average Response Time**: 1.3s
- **Test Pass Rate**: 100%
## When to Use
- JavaScript bundle too large (>500KB)
- Need to analyze bundle composition
- Finding duplicate dependencies
- Understanding chunk splitting
- Optimizing lazy loading
- Debugging missing modules
- Analyzing dependency tree
## Tools Provided
1. **build_get_manifest** - Get build manifest
2. **build_get_chunks** - Get bundle chunks
3. **build_find_module** - Find module in build
4. **build_get_dependencies** - Get dependency graph
5. **build_analyze_size** - Analyze bundle size
## Prerequisites
### Required
- **Build artifacts** must be generated during build
### Webpack Setup
```javascript
const { StatsWriterPlugin } = require('webpack-stats-plugin');
module.exports = {
plugins: [
new StatsWriterPlugin({
filename: 'stats.json',
stats: {
all: true,
source: false,
},
}),
],
};
```
### Vite Setup
```javascript
export default {
build: {
manifest: true,
rollupOptions: {
output: {
manualChunks: (id) => {
// Custom chunking logic
},
},
},
},
};
```
## Quick Start
```
# 1. Get manifest
build_get_manifest → Overview of build
# 2. Analyze size
build_analyze_size → Find large files
# 3. Get chunks
build_get_chunks → Understand splitting
# 4. Find duplicates
build_get_dependencies → Deduplicate
```
## Documentation
- **[SKILL.md](./SKILL.md)** - Complete skill documentation
## Common Use Cases
### Initial Analysis
```
1. build_get_manifest → Build overview
2. build_analyze_size → Size breakdown
3. build_get_chunks → Chunk analysis
```
### Optimize Large Bundle
```
1. build_analyze_size → Find large files (>100KB)
2. build_get_dependencies → Find duplicates
3. build_find_module → Locate specific modules
4. Implement code splitting
```
### Debug Module Issues
```
1. build_find_module → Search for module
2. build_get_dependencies → Check imports
3. Verify module included correctly
```
## Performance
- **Average response time**: 1.3s
- **Range**: 1.0s - 1.8s
- **Success rate**: 100% (with artifacts)
- **Graceful degradation**: Returns error without artifacts
## Integration
Works seamlessly with:
- **websee-source-intelligence** - Map modules to source
- **websee-network-intelligence** - Correlate chunks with requests
## Build Tool Support
| Build Tool | stats.json | manifest.json | Dependency Graph |
|------------|------------|---------------|------------------|
| Webpack 4 | ✅ Full | ❌ No | ✅ Full |
| Webpack 5 | ✅ Full | ❌ No | ✅ Full |
| Vite 2-4 | ❌ No | ✅ Full | ⚠️ Partial |
| Rollup | ⚠️ Partial | ⚠️ Partial | ⚠️ Partial |
## Size Targets
| Asset Type | Target | Warning | Critical |
|------------|--------|---------|----------|
| Initial JS | < 200KB | > 300KB | > 500KB |
| Initial CSS | < 50KB | > 100KB | > 200KB |
| Vendor chunks | < 150KB | > 250KB | > 400KB |
| Total bundle | < 500KB | > 1MB | > 2MB |
## Version
- **Skill Version**: 1.0.0
- **Last Updated**: 2025-10-26
- **Status**: ✅ Production Ready