Automatically Remove Unused CSS and JavaScript Code in Bootstrap Builds

[sabeerbikba]

Currently, Bootstrap includes all of its CSS and JavaScript code in the production build, even if not all of the code is used by the application. This can lead to larger page sizes and slower loading times. Tailwind CSS addresses this issue by automatically removing unused CSS code during the production build process.

We propose implementing a similar feature for Bootstrap to automatically remove unused CSS and JavaScript code during the production build process. This would improve page performance and provide a more consistent development experience with Tailwind CSS.

Benefits:

• Reduced page size: By removing unused code, the production build size of Bootstrap would be significantly smaller, leading to faster loading times.
• Improved performance: Smaller page sizes translate to improved page performance, providing a better user experience.
• Consistent development experience: The ability to automatically remove unused code would align Bootstrap with Tailwind CSS in terms of development workflow and optimization techniques.

Implementation:

The feature could be implemented using a tool like PurgeCSS or UnCSS. These tools analyze the HTML and CSS files to identify which CSS selectors are actually used and remove the unused ones. For JavaScript, a similar tool could be used to analyze the JavaScript code and remove unused code.

Additional considerations:

• Whitelist mechanism: To ensure that critical Bootstrap components are not removed, a whitelist mechanism could be implemented. This would allow developers to specify which CSS selectors and JavaScript code should always be included in the production build.
• Configuration options: The feature could provide configuration options to control the level of optimization. For example, developers might want to choose to remove only unused CSS selectors or to also remove unused JavaScript code.

We believe that this feature would be a valuable addition to Bootstrap and would help to improve the performance and development experience of Bootstrap projects.

[Esdras-Nsounda]

j'adore bootstrap plusque tailwindcss. et le simple fait qu'il n'ajoute pas ces nouvelle fonctionnaliter me rend triste.

[julien-deramond]

The current setup may not be flawless, but you already have the ability to choose specific Sass components for your project (see Bootstrap Sass customization guide). The same applies to JavaScript components, both of which can significantly reduce the size of your CSS and JS bundles. Additionally, you can configure PurgeCSS in your project to further minimize your CSS footprint.