Vite Bundle Laravel Package

Product Decisions This Supports

• Modernization of Frontend Tooling: Replace Webpack Encore (deprecated) with Vite for faster builds, HMR (Hot Module Replacement), and improved developer experience.
• Symfony Ecosystem Alignment: Integrate Vite seamlessly into Symfony applications without disrupting existing Twig templates or workflows.
• Performance Optimization: Leverage Vite’s native ES modules and optimized asset handling to reduce bundle sizes and improve load times.
• Roadmap for Frontend Stack: Adopt a future-proof solution compatible with modern frameworks (React, Svelte, Stimulus) and Vite’s evolving ecosystem.
• Build vs. Buy Decision: Avoid reinventing Vite-Symfony integration by adopting a battle-tested, maintained package with active development.
• Use Cases:
  • Migrating legacy Symfony apps from Webpack Encore to Vite.
  • New Symfony projects requiring modern frontend tooling.
  • Teams using Stimulus, React, or Svelte with Symfony.
  • Projects needing legacy browser support (via Vite’s polyfills).

When to Consider This Package

• Adopt if:

  • You’re using Symfony 5.3+ and need Vite integration.
  • Your team is migrating from Webpack Encore or adopting Vite for the first time.
  • You require Twig compatibility (e.g., vite_entry_link_tags, vite_entry_script_tags).
  • Your project uses Stimulus, React, or Svelte with Symfony.
  • You need legacy browser support (Vite’s polyfills handle older browsers gracefully).
  • Your team prioritizes faster builds and HMR over Webpack’s traditional setup.

• Look elsewhere if:

  • You’re not using Symfony (this is Symfony-specific).
  • Your project requires advanced Webpack features not yet supported in Vite (e.g., complex loaders).
  • You need multi-page applications (MPA) with shared Webpack config (Vite’s per-page optimization may require custom setup).
  • Your team lacks Node.js/npm familiarity (Vite requires Node.js for asset builds).
  • You’re using Symfony <5.3 (minimal PHP 8.0 support; Symfony 5.2 may need adjustments).

How to Pitch It (Stakeholders)

For Executives: "This package lets us modernize our Symfony frontend stack by replacing Webpack Encore with Vite—cutting build times by 50%+ and improving developer productivity. It’s a drop-in replacement for Twig templates, so our frontend team can adopt Vite’s speed and HMR without disrupting existing workflows. With active maintenance and support for React, Svelte, and Stimulus, it future-proofs our tech stack while reducing technical debt. Migration is straightforward, and the performance gains justify the switch."

For Engineering Teams: *"ViteBundle solves our Webpack Encore migration pain points by:

1. Seamless Twig integration – Replace encore_entry_link_tags with vite_entry_link_tags in minutes.
2. Faster builds/HMR – Vite’s native ES modules and optimized dev server outperform Webpack.
3. Legacy support – Built-in polyfills handle older browsers without manual config.
4. Modern framework support – Works out-of-the-box with Stimulus, React, and Svelte.
5. Active maintenance – Regular updates for Vite 4/5/6/7 and Symfony compatibility.

Migration steps: Backup assets/ and package.json, run composer require pentatrion/vite-bundle, update vite.config.js, and replace Twig tags. No breaking changes to your app logic."*

For Developers: *"Say goodbye to Webpack’s slow builds and hello to Vite’s instant HMR. This bundle:

• Replaces Encore with zero template refactoring (just swap Twig functions).
• Handles legacy browsers automatically (no manual polyfill config).
• Supports Stimulus/React/Svelte with built-in plugins.
• Works with Symfony’s asset system out of the box.

Example: Replace {{ encore_entry_script_tags('app') }} with {{ vite_entry_script_tags('app') }} in your base template. Run npm run dev, and enjoy sub-second HMR."*