Vite Plugin Legacy

Overview

The vite-plugin-legacy is a powerful tool designed for developers who need to ensure their applications support outdated browsers. In an era where web standards and capabilities are constantly evolving, this plugin offers a seamless solution to generate a legacy bundle, making it easier to handle users on older platforms. By effortlessly managing polyfills and leveraging automatic feature detection, this plugin allows developers to focus on modern development while maintaining compatibility.

What sets vite-plugin-legacy apart is its ease of customization and intelligent design. With minimal configuration, developers can define which browsers they want to support and receive a tailored legacy bundle that ensures functionality across a diverse range of environments. This proactive approach to legacy support opens up the web experience to a broader audience without compromising on modern features.

Features

• Browser Customization: Easily define the browsers you want to support by adjusting the targets option, allowing for fine-tuned legacy compatibility.

• Automatic Feature Detection: The injected <script> determines if the user's browser supports ES modules and the required JavaScript version, dynamically loading the appropriate bundle.

• Hassle-Free Polyfills: Integrate polyfills without any hassle using Polyfill.io—just add the desired polyfills to the array, and the legacy bundle manages the rest.

• Usage-Based Core-js inlining: If corejs: true is set, modern features are automatically detected by Babel, ensuring only necessary core-js polyfills are included in the legacy bundle.

• Sourcemap Support: Facilitates easier debugging by enabling sourcemap support, which helps track down issues in production bundles.

• Minification Support: Legacy bundles can be minified using Terser, helping to optimize performance and load times, with customizable options available for fine-tuning.

• Production Only: The legacy bundle is generated solely during the production build process, streamlining development and maintaining a focus on performance.

• Adjacent Polyfills: Get auto-completion for supported polyfills when using TypeScript in Vite config, enhancing development efficiency and reducing errors.