Aller au contenu

Feuilles de chaleur

Vit - Outillage frontal de la prochaine génération

Vite est un outil de construction qui vise à fournir une expérience de développement plus rapide et plus maigre pour les projets Web modernes. Il se compose d'un serveur dev qui fournit des améliorations de fonctionnalités riches sur les modules ES natifs, et une commande build qui regroupe votre code avec Rollup.

Copier toutes les commandes Générer PDF

Sommaire

  • [Installation] (LINK_0)
  • Création de projets
  • Serveur de développement
  • [Configuration] (LINK_0)
  • [Processus de construction] (LINK_0)
  • [Système de lecture] (LINK_0)
  • [variables environnementales] (LINK_0)
  • [Manipulation de l'ensemble] (LINK_0)
  • [Traitement du SSC] (LINK_0)
  • [Type de support de script] (LINK_0)
  • [Test de l'intégration] (LINK_0)
  • [Déploiement] (LINK_0)
  • [Optimisation du rendement] (LINK_0)
  • [Dépannage] (LINK_0)
  • [Meilleures pratiques] (LINK_0)

Installation

Installation mondiale

# Install Vite globally
npm install -g vite

# Using Yarn
yarn global add vite

# Using pnpm
pnpm add -g vite

# Verify installation
vite --version

Installation spécifique au projet

# Install as dev dependency
npm install --save-dev vite

# Using Yarn
yarn add --dev vite

# Using pnpm
pnpm add -D vite
```_

### Préalables
```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
```_

## Création de projets

### Créer de nouveaux projets
```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

Modèles disponibles

# 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

Structure du projet

# 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)

Serveur de développement

Démarrer le serveur de développement

# 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

Options de serveur de développement

# 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

Remplacement du module à chaud (HMR)

// 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
  });
}

Configuration

Configuration de base

// 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'
  }
});

Configuration avancée

// 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']
  }
});

Configuration conditionnelle

// 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;
});

Construire le processus

Bâtiment pour la production

# 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

Configuration de construction

// 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'
    }
  }
});

Aperçu de l'application intégrée

# Preview production build
npm run preview

# Preview with specific port
npm run preview -- --port 4173

# Preview with HTTPS
npm run preview -- --https

Système de connexion

Greffons officiels

# 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

Configuration du plugin

// 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']
      }
    })
  ]
});

Greffons communautaires populaires

# 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

Développement de plugins personnalisés

// 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()]
});

Variables d'environnement

Fichiers Environnement

# 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

Exemples de variables d'environnement

# .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

Utilisation des variables d'environnement

// 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

Variables d'environnement TypeScript

// vite-env.d.ts
interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string;
  readonly VITE_API_URL: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

Gestion des actifs

Actifs statiques

// 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 });

Répertoire public

# 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

Traitement des biens

// 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 Traitement

CSS Modules

/* styles.module.css */
.button {
  background: blue;
  color: white;
}

.button:hover {
  background: darkblue;
}

// Using CSS modules
import styles from './styles.module.css';

function Button() {
  return <button className={styles.button}>Click me</button>;
}

CSS Prétraitements

# Install preprocessors
npm install --save-dev sass
npm install --save-dev less
npm install --save-dev stylus

// 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)
        }
      }
    }
  }
});

Intégration postCSS

# Install PostCSS plugins
npm install --save-dev autoprefixer
npm install --save-dev tailwindcss
npm install --save-dev postcss-nested

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    'postcss-nested': {}
  }
};

CSS-in-JS Appui

# Install CSS-in-JS libraries
npm install styled-components
npm install @emotion/react @emotion/styled
npm install @stitches/react

Support de script de type

Configuration du script de type

// 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 dans Vite Config

// 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
  }
});

Contrôle de type

# Run TypeScript compiler for type checking
npx tsc --noEmit

# Add to package.json scripts
{
  "scripts": {
    "type-check": "tsc --noEmit",
    "build": "tsc --noEmit && vite build"
  }
}

Tester l'intégration

Vitest Setup

# 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

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/test/setup.ts'
  }
});

Configuration d'essai

// src/test/setup.ts
import '@testing-library/jest-dom';

// Mock environment variables
Object.defineProperty(import.meta, 'env', {
  value: {
    VITE_API_URL: 'http://localhost:3000'
  }
});

Exemples d'essais

// src/components/Button.test.tsx
import { render, screen } from '@testing-library/react';
import { Button } from './Button';

test('renders button with text', () => {
  render(<Button>Click me</Button>);
  expect(screen.getByRole('button')).toHaveTextContent('Click me');
});

Paquet.json Scripts

{
  "scripts": {
    "test": "vitest",
    "test:ui": "vitest --ui",
    "test:run": "vitest run",
    "coverage": "vitest run --coverage"
  }
}

Déploiement

Hébergement statique

# 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

Déploiement Docker

# 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

# .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 }}

Optimisation des performances

Analyse de l'ensemble

# 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
    })
  ]
});

Fractionnement du code

// 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'))
  }
];

Configuration d'optimisation

// 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']
  }
});

Surveillance de la performance

// 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);

Dépannage

Questions communes

Port déjà utilisé

# Find process using port
lsof -ti:3000

# Kill process
kill -9 $(lsof -ti:3000)

# Use different port
npm run dev -- --port 3001

Résolution des problèmes

// vite.config.js
export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    },
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.vue']
  }
});

Créer des erreurs

# Clear cache
rm -rf node_modules/.vite

# Reinstall dependencies
rm -rf node_modules package-lock.json
npm install

# Force rebuild
npm run build -- --force

Problèmes de mémoire

# 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"
  }
}

Mode de débogage

# 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

Débogage des performances

// 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);
      }
    }
  }
});

Meilleures pratiques

Structure du projet

# 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

Gestion de la configuration

// 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
  }
});

Meilleures pratiques en matière de rendement

// 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;
}

Pratiques exemplaires en matière de sécurité

// 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');
      }
    }
  }
});

Développement Flux de travail

{
  "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"
  }
}

Résumé

Vite est un outil de construction puissant, rapide et moderne qui améliore considérablement l'expérience de développement pour les projets frontend. Les principaux avantages sont les suivants :

  • Lightning Fast: démarrage du serveur instantané et HMR rapide
  • Caractéristiques principales: TypeScript, JSX, prise en charge des préprocesseurs CSS hors de la boîte
  • Bâtiment optimisé: Utilisations Rollup pour les constructions de production avec des optimisations avancées
  • Écosystà ̈me Plugin: Système de plugin étendu pour la personnalisation
  • Cadre Agnostique: Fonctionne avec Réact, Vue, Svelte et vanille JavaScript

Pour une performance optimale, utilisez les modules ES natifs de Vite en développement, configurez le fractionnement de code approprié pour la production et utilisez l'écosystème riche du plugin pour améliorer la fonctionnalité.