How do I build a minimal custom bundle that tree-shakes unused JS?

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

How do I build a minimal custom bundle that tree-shakes unused JS?

Asked on Jul 16, 2025

Answer

To build a minimal custom bundle that tree-shakes unused JavaScript in Bootstrap 5, you can use tools like Webpack or Rollup. These tools help in importing only the necessary components, optimizing the final bundle size.

<!-- BEGIN COPY / PASTE -->
        // Install Bootstrap and necessary tools
        // npm install bootstrap @popperjs/core

        // Import only the required Bootstrap components
        import { Tooltip, Toast, Popover } from 'bootstrap';

        // Initialize components if needed
        document.addEventListener('DOMContentLoaded', () => {
            const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new Tooltip(tooltipTriggerEl);
            });
        });
        <!-- END COPY / PASTE -->

Additional Comment:

Install Bootstrap and Popper.js using npm to manage dependencies.
Import only the Bootstrap components you need, such as Tooltip, Toast, or Popover.
Initialize these components in your JavaScript as required.
Use a bundler like Webpack or Rollup to tree-shake and optimize your bundle.

✅ Answered with Bootstrap 5 best practices.

Ask any question about Bootstrap here... and get an instant response.

How do I build a minimal custom bundle that tree-shakes unused JS?

Asked on Jul 16, 2025

Answer

The Q&A Network