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

Asked on Jul 27, 2025

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

← Back to All Questions