Automatically Remove Unused CSS and JavaScript Code in Bootstrap Builds

[sabeerbikba]

Discussed in https://github.com/orgs/twbs/discussions/39451

^{Originally posted by sabeerbikba November 29, 2023}

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.

```[tasklist] ### Tasks ```