Vit Cheatsheet¶
Vite - Next Generation Frontend Tooling
Vite ist ein Build-Tool, das eine schnellere und schlankere Entwicklungserfahrung für moderne Web-Projekte bieten soll. Es besteht aus einem dev-Server, der über native ES-Module reiche Featureerweiterungen bietet, und einem Build-Befehl, der Ihren Code mit Rollup bündelt.
__
Inhaltsverzeichnis - (#Installation) - (#Projekt-Erstellung) - (#Entwicklungsserver) - (#configuration) - (#build-Prozess) - Plugin System - Umweltvariablen - (#assethandling) - (#css-Processing) - (#typescript-support) - (#testing-integration) - (# Bereitstellung) - (#Performance Optimization) - (Troubleshooting) - (#best-practices)
• Installation
Globale Installation¶
# Install Vite globally
npm install -g vite
# Using Yarn
yarn global add vite
# Using pnpm
pnpm add -g vite
# Verify installation
vite --version
```_
### Projektspezifische Installation
```bash
# Install as dev dependency
npm install --save-dev vite
# Using Yarn
yarn add --dev vite
# Using pnpm
pnpm add -D vite
```_
### Voraussetzungen
```bash
# Node.js version requirements
node --version # Should be 14.18+ or 16+
# Check npm version
npm --version
# Update npm if needed
npm install -g npm@latest
```_
Projekterstellung
### Neue Projekte erstellen
```bash
# Create vanilla JavaScript project
npm create vite@latest my-project
# Create with specific template
npm create vite@latest my-react-app -- --template react
npm create vite@latest my-vue-app -- --template vue
npm create vite@latest my-svelte-app -- --template svelte
# Using Yarn
yarn create vite my-project
# Using pnpm
pnpm create vite my-project
```_
### Verfügbare Vorlagen
```bash
# JavaScript frameworks
npm create vite@latest -- --template vanilla
npm create vite@latest -- --template vanilla-ts
npm create vite@latest -- --template react
npm create vite@latest -- --template react-ts
npm create vite@latest -- --template vue
npm create vite@latest -- --template vue-ts
npm create vite@latest -- --template svelte
npm create vite@latest -- --template svelte-ts
# Additional templates
npm create vite@latest -- --template lit
npm create vite@latest -- --template lit-ts
npm create vite@latest -- --template preact
npm create vite@latest -- --template preact-ts
```_
### Projektstruktur
```bash
# Typical Vite project structure
my-vite-project/
├── index.html # Entry HTML file
├── package.json # Dependencies and scripts
├── vite.config.js # Vite configuration
├── src/
│ ├── main.js # Application entry point
│ ├── style.css # Global styles
│ └── components/ # Component files
├── public/ # Static assets
└── dist/ # Build output (generated)
```_
Der Entwicklungsserver
### Starting Development Server
```bash
# Start dev server
npm run dev
# Start with specific port
npm run dev -- --port 3000
# Start with specific host
npm run dev -- --host 0.0.0.0
# Start with HTTPS
npm run dev -- --https
# Start with custom config
npm run dev -- --config vite.config.custom.js
```_
### Entwicklungsserver Optionen
```bash
# Open browser automatically
npm run dev -- --open
# Clear cache and restart
npm run dev -- --force
# Enable debug mode
DEBUG=vite:* npm run dev
# Start with specific mode
npm run dev -- --mode development
```_
### Hot Module Ersatz (HMR)
```javascript
// Enable HMR in your code
if (import.meta.hot) {
import.meta.hot.accept('./module.js', (newModule) => {
// Handle module update
});
// Accept self updates
import.meta.hot.accept();
// Dispose callback
import.meta.hot.dispose((data) => {
// Cleanup before update
});
}
```_
Konfiguration
### Grundkonfiguration
```javascript
// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
// Basic options
root: './src',
base: '/',
mode: 'development',
// Server configuration
server: {
port: 3000,
host: true,
open: true,
https: false,
proxy: {
'/api': 'http://localhost:8080'
}
},
// Build configuration
build: {
outDir: 'dist',
assetsDir: 'assets',
sourcemap: true,
minify: 'terser'
}
});
```_
### Erweiterte Konfiguration
```javascript
// vite.config.js
import { defineConfig } from 'vite';
import { resolve } from 'path';
export default defineConfig({
// Resolve configuration
resolve: {
alias: {
'@': resolve(__dirname, 'src'),
'@components': resolve(__dirname, 'src/components'),
'@utils': resolve(__dirname, 'src/utils')
},
extensions: ['.js', '.ts', '.jsx', '.tsx', '.vue']
},
// CSS configuration
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "@/styles/variables.scss";`
}
},
modules: {
localsConvention: 'camelCase'
}
},
// Environment variables
define: {
__APP_VERSION__: JSON.stringify(process.env.npm_package_version)
},
// Optimization
optimizeDeps: {
include: ['lodash', 'axios'],
exclude: ['some-large-dependency']
}
});
```_
### Bedingte Konfiguration
```javascript
// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig(({ command, mode }) => {
const config = {
// Common configuration
};
if (command === 'serve') {
// Development configuration
config.server = {
port: 3000
};
} else {
// Build configuration
config.build = {
rollupOptions: {
external: ['vue']
}
};
}
if (mode === 'production') {
// Production-specific configuration
config.build.minify = 'terser';
}
return config;
});
```_
Der Prozess
### Gebäude für Produktion
```bash
# Build for production
npm run build
# Build with specific mode
npm run build -- --mode production
# Build with custom config
npm run build -- --config vite.config.prod.js
# Build and analyze bundle
npm run build -- --analyze
```_
### Konfigurieren erstellen
```javascript
// vite.config.js
export default defineConfig({
build: {
// Output directory
outDir: 'dist',
// Assets directory
assetsDir: 'assets',
// Generate sourcemaps
sourcemap: true,
// Minification
minify: 'terser',
// Terser options
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true
}
},
// Rollup options
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
admin: resolve(__dirname, 'admin.html')
},
output: {
manualChunks: {
vendor: ['vue', 'vue-router'],
utils: ['lodash', 'axios']
}
}
},
// Asset inlining threshold
assetsInlineLimit: 4096,
// CSS code splitting
cssCodeSplit: true,
// Library mode
lib: {
entry: resolve(__dirname, 'src/main.js'),
name: 'MyLib',
fileName: 'my-lib'
}
}
});
```_
### Preview Built Application
```bash
# Preview production build
npm run preview
# Preview with specific port
npm run preview -- --port 4173
# Preview with HTTPS
npm run preview -- --https
```_
Das Plugin System
### Offizielle Plugins
```bash
# Install official plugins
npm install --save-dev @vitejs/plugin-react
npm install --save-dev @vitejs/plugin-vue
npm install --save-dev @vitejs/plugin-svelte
npm install --save-dev @vitejs/plugin-legacy
```_
### Plugin Configuration
```javascript
// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { resolve } from 'path';
export default defineConfig({
plugins: [
react({
// React plugin options
include: "**/*.{jsx,tsx}",
babel: {
plugins: ['babel-plugin-styled-components']
}
})
]
});
```_
### Beliebte Community Plugins
```bash
# Install popular plugins
npm install --save-dev vite-plugin-eslint
npm install --save-dev vite-plugin-windicss
npm install --save-dev vite-plugin-pwa
npm install --save-dev vite-plugin-mock
npm install --save-dev vite-plugin-html
```_
### Custom Plugin Development
```javascript
// Custom plugin example
function myPlugin() {
return {
name: 'my-plugin',
configResolved(config) {
// Access final config
},
buildStart(opts) {
// Build start hook
},
load(id) {
// Load hook
if (id === 'virtual:my-module') {
return 'export const msg = "Hello from virtual module"';
}
},
transform(code, id) {
// Transform hook
if (id.endsWith('.special')) {
return `export default ${JSON.stringify(code)}`;
}
}
};
}
// Use custom plugin
export default defineConfig({
plugins: [myPlugin()]
});
```_
Umweltvariablen
### Umweltdateien
```bash
# Environment file hierarchy
.env # Loaded in all cases
.env.local # Loaded in all cases, ignored by git
.env.[mode] # Only loaded in specified mode
.env.[mode].local # Only loaded in specified mode, ignored by git
```_
### Umgebung Variable Beispiele
```bash
# .env
VITE_APP_TITLE=My App
VITE_API_URL=https://api.example.com
# .env.development
VITE_API_URL=http://localhost:3000/api
# .env.production
VITE_API_URL=https://api.production.com
```_
### Verwenden von Umweltvariablen
```javascript
// In your application code
console.log(import.meta.env.VITE_APP_TITLE);
console.log(import.meta.env.VITE_API_URL);
// Built-in environment variables
console.log(import.meta.env.MODE); // 'development' or 'production'
console.log(import.meta.env.BASE_URL); // Base URL
console.log(import.meta.env.PROD); // Boolean
console.log(import.meta.env.DEV); // Boolean
console.log(import.meta.env.SSR); // Boolean
```_
### TypeScript Environment Variables
```typescript
// vite-env.d.ts
interface ImportMetaEnv {
readonly VITE_APP_TITLE: string;
readonly VITE_API_URL: string;
}
interface ImportMeta {
readonly env: ImportMetaEnv;
}
```_
Artikel 1
### Static Assets
```javascript
// Import static assets
import imgUrl from './img.png';
import workerUrl from './worker.js?worker';
import inlineWorker from './worker.js?worker&inline';
// URL imports
import assetAsURL from './asset.js?url';
import assetAsString from './shader.glsl?raw';
// Dynamic imports
const modules = import.meta.glob('./dir/*.js');
const modules = import.meta.glob('./dir/*.js', { eager: true });
```_
### Public Directory
```bash
# Files in public/ are served at root
public/
├── favicon.ico # Available at /favicon.ico
├── robots.txt # Available at /robots.txt
└── images/
└── logo.png # Available at /images/logo.png
```_
### Asset Processing
```javascript
// vite.config.js
export default defineConfig({
assetsInclude: ['**/*.gltf'],
build: {
assetsInlineLimit: 4096,
rollupOptions: {
output: {
assetFileNames: (assetInfo) => {
let extType = assetInfo.name.split('.').at(1);
if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
extType = 'img';
}
return `assets/${extType}/[name]-[hash][extname]`;
}
}
}
}
});
```_
CSS Verarbeitung
### CSS Modules
```css
/* styles.module.css */
.button {
background: blue;
color: white;
}
.button:hover {
background: darkblue;
}
```_
```javascript
// Using CSS modules
import styles from './styles.module.css';
function Button() {
return <button className={styles.button}>Click me</button>;
}
CSS Preprocessors¶
# Install preprocessors
npm install --save-dev sass
npm install --save-dev less
npm install --save-dev stylus
```_
```javascript
// vite.config.js
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "@/styles/variables.scss";`
},
less: {
math: 'parens-division'
},
styl: {
define: {
$specialColor: new stylus.nodes.RGBA(51, 197, 255, 1)
}
}
}
}
});
PostCSS Integration¶
# Install PostCSS plugins
npm install --save-dev autoprefixer
npm install --save-dev tailwindcss
npm install --save-dev postcss-nested
```_
```javascript
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
'postcss-nested': {}
}
};
CSS-in-JS Support¶
# Install CSS-in-JS libraries
npm install styled-components
npm install @emotion/react @emotion/styled
npm install @stitches/react
```_
Unterstützung von TypScript
### TypeScript Configuration
```json
// tsconfig.json
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
```_
### TypeScript in Vite Config
```typescript
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { resolve } from 'path';
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': resolve(__dirname, './src')
}
},
server: {
port: 3000
}
});
```_
### Type Checking
```bash
# Run TypeScript compiler for type checking
npx tsc --noEmit
# Add to package.json scripts
{
"scripts": {
"type-check": "tsc --noEmit",
"build": "tsc --noEmit && vite build"
}
}
```_
Integration testen
### Vitest Setup
```bash
# Install Vitest
npm install --save-dev vitest
# Install testing utilities
npm install --save-dev @testing-library/react
npm install --save-dev @testing-library/jest-dom
npm install --save-dev jsdom
```_
```javascript
// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
test: {
globals: true,
environment: 'jsdom',
setupFiles: './src/test/setup.ts'
}
});
Testkonfiguration¶
```javascript // src/test/setup.ts import '@testing-library/jest-dom';
// Mock environment variables Object.defineProperty(import.meta, 'env', { value: { VITE_API_URL: 'http://localhost:3000' } }); ```_
Beispieltests¶
```javascript // src/components/Button.test.tsx import { render, screen } from '@testing-library/react'; import { Button } from './Button';
test('renders button with text', () => { render(); expect(screen.getByRole('button')).toHaveTextContent('Click me'); }); ```_
Paket.json Scripts¶
json
{
"scripts": {
"test": "vitest",
"test:ui": "vitest --ui",
"test:run": "vitest run",
"coverage": "vitest run --coverage"
}
}_
Einsatz
Static Hosting¶
```bash
Build for production¶
npm run build
Deploy to various platforms¶
Netlify¶
npm install -g netlify-cli netlify deploy --prod --dir dist
Vercel¶
npm install -g vercel vercel --prod
GitHub Pages¶
npm install --save-dev gh-pages ```_
Docker Deployment¶
```dockerfile
Dockerfile¶
FROM node:18-alpine as build
WORKDIR /app COPY package*.json ./ RUN npm ci
COPY . . RUN npm run build
FROM nginx:alpine COPY --from=build /app/dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] ```_
CI/CD Pipeline¶
```yaml
.github/workflows/deploy.yml¶
name: Deploy
on: push: branches: [main]
jobs: deploy: runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '18'
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Run tests
run: npm run test:run
- name: Build
run: npm run build
- name: Deploy to Netlify
uses: nwtgck/actions-netlify@v2.0
with:
publish-dir: './dist'
production-branch: main
env:
NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
```_
 Leistungsoptimierung
Bundle Analysis¶
```bash
Install bundle analyzer¶
npm install --save-dev rollup-plugin-visualizer
Add to vite.config.js¶
import { visualizer } from 'rollup-plugin-visualizer';
export default defineConfig({ plugins: [ visualizer({ filename: 'dist/stats.html', open: true }) ] }); ```_
Code Spliting¶
```javascript // Dynamic imports for code splitting const LazyComponent = lazy(() => import('./LazyComponent'));
// Route-based splitting const routes = [ { path: '/home', component: lazy(() => import('./pages/Home')) }, { path: '/about', component: lazy(() => import('./pages/About')) } ]; ```_
Optimierung Konfiguration¶
```javascript // vite.config.js export default defineConfig({ build: { rollupOptions: { output: { manualChunks: { vendor: ['react', 'react-dom'], router: ['react-router-dom'], ui: ['@mui/material', '@mui/icons-material'] } } } },
optimizeDeps: { include: ['react', 'react-dom'], exclude: ['@vite/client', '@vite/env'] } }); ```_
Performance Monitoring¶
```javascript // Performance monitoring script function measurePerformance() { // Measure bundle size const bundleSize = performance.getEntriesByType('navigation')[0].transferSize;
// Measure load time const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
// Send metrics to analytics analytics.track('performance', { bundleSize, loadTime, userAgent: navigator.userAgent }); }
window.addEventListener('load', measurePerformance); ```_
Fehlerbehebung
Häufige Fragen¶
Hafen bereits im Einsatz ```bash
Find process using port¶
lsof -ti:3000
Kill process¶
kill -9 $(lsof -ti:3000)
Use different port¶
npm run dev -- --port 3001 ```_
Modul Auflösungsfragen
javascript
// vite.config.js
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
},
extensions: ['.js', '.ts', '.jsx', '.tsx', '.vue']
}
});_
Fehler erstellen ```bash
Clear cache¶
rm -rf node_modules/.vite
Reinstall dependencies¶
rm -rf node_modules package-lock.json npm install
Force rebuild¶
npm run build -- --force ```_
Speicherprobleme ```bash
Increase Node.js memory limit¶
export NODE_OPTIONS="--max-old-space-size=4096"
Or in package.json¶
{ "scripts": { "build": "NODE_OPTIONS='--max-old-space-size=4096' vite build" } } ```_
Debug Mode¶
```bash
Enable debug logging¶
DEBUG=vite:* npm run dev
Specific debug categories¶
DEBUG=vite:deps npm run dev DEBUG=vite:hmr npm run dev DEBUG=vite:config npm run dev ```_
Performance Debugging¶
```javascript // vite.config.js export default defineConfig({ server: { hmr: { overlay: false } },
build: { sourcemap: true, rollupOptions: { onwarn(warning, warn) { // Suppress specific warnings if (warning.code === 'MODULE_LEVEL_DIRECTIVE') return; warn(warning); } } } }); ```_
oder Best Practices
Projektstruktur¶
```bash
Recommended project structure¶
src/ ├── components/ # Reusable components │ ├── ui/ # Basic UI components │ └── features/ # Feature-specific components ├── pages/ # Page components ├── hooks/ # Custom hooks ├── utils/ # Utility functions ├── services/ # API services ├── stores/ # State management ├── styles/ # Global styles ├── assets/ # Static assets └── types/ # TypeScript types ```_
Konfigurationsmanagement¶
```javascript // Use environment-specific configs // vite.config.base.js export const baseConfig = { plugins: [react()], resolve: { alias: { '@': resolve(__dirname, './src') } } };
// vite.config.dev.js import { baseConfig } from './vite.config.base.js';
export default defineConfig({ ...baseConfig, server: { port: 3000, open: true } }); ```_
Performance Best Practices¶
```javascript // Lazy load components const LazyComponent = lazy(() => import('./Component').then(module => ({ default: module.Component })) );
// Preload critical resources const criticalResource = import('./critical-module');
// Use dynamic imports for large libraries async function loadChart() { const { Chart } = await import('chart.js'); return Chart; } ```_
Security Best Practices¶
```javascript // vite.config.js export default defineConfig({ server: { headers: { 'X-Frame-Options': 'DENY', 'X-Content-Type-Options': 'nosniff', 'Referrer-Policy': 'strict-origin-when-cross-origin' } },
build: { rollupOptions: { external: (id) => { // Externalize sensitive modules return id.includes('secret') || id.includes('private'); } } } }); ```_
Development Workflow¶
json
{
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"test": "vitest",
"test:ui": "vitest --ui",
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"lint:fix": "eslint src --ext ts,tsx --fix",
"type-check": "tsc --noEmit",
"analyze": "vite build --analyze"
}
}_
--
Zusammenfassung
Vite ist ein leistungsstarkes, schnelles und modernes Build-Tool, das die Entwicklungserfahrung für Frontend-Projekte deutlich verbessert. Zu den wichtigsten Vorteilen gehören:
- Lightning Fast: Instant Server Start und Blitzschnelle HMR
- **Rich Features*: TypeScript, JSX, CSS Preprozessoren unterstützen aus dem Kasten
- **Optimized Build*: Verwendet Rollup für die Produktion mit erweiterten Optimierungen
- **Plugin Ecosystem*: Umfangreiches Plugin-System für die Anpassung
- **Framework Agnostic*: Arbeitet mit React, Vue, Svelte und Vanille JavaScript
Für optimale Leistung, nutzen Sie die nativen ES-Module von Vite in der Entwicklung, konfigurieren Sie die richtige Codespaltung für die Produktion und nutzen Sie das reiche Plugin-Ökosystem für verbesserte Funktionalität.
_