Implement Bootstrap-Vue tree-shaking to reduce bundle size - #750
Closed
Tim020 wants to merge 3 commits into
Closed
Conversation
- Create tree-shakeable plugin file importing only used components - Replace global BootstrapVue and IconsPlugin imports with selective imports - Import 50+ Bootstrap-Vue components and 8 icons actually used in codebase - Maintain $bvModal plugin for modal operations Components included: - Layout & Grid: BContainer, BRow, BCol - Forms: BForm, BFormGroup, BFormInput, BFormSelect, BFormCheckbox, etc. - Buttons: BButton, BButtonGroup - Table: BTable, BTableSimple, BTbody, BTr, BTh, BTd - Navigation: BNavbar, BNavItem, BNavItemDropdown - Tabs: BTabs, BTab - Modals: BModal with $bvModal plugin - Other: BAlert, BPagination, BProgress, BSpinner, BOverlay, etc. Icons included: - BIconPlusSquareFill, BIconCheckSquareFill, BIconXSquareFill - BIconXCircle, BIconSquareFill, BIconQuestionCircleFill - BIconClipboard, BIconCheckCircle Benefits: - Main bundle reduced from 1,419KB to 633KB (55% reduction) - Gzipped size reduced from 364KB to 186KB (49% reduction) - When combined with vendor chunking (PR #749), bootstrap-vendor chunk will be 266KB (67KB gzipped) vs 1,164KB (288KB gzipped) - Overall 77% reduction in Bootstrap-Vue bundle size - Maintains full compatibility with existing code 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
github-actions
Bot
added
client
Consolidate three separate imports from 'bootstrap-vue' into a single import statement to resolve import/no-duplicates linting errors. - Merge component imports, icon imports, and plugin imports - Maintain all functionality and organization with inline comments - No changes to registered components or behavior 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
…vidual imports Replace individual component imports with component group plugins for better maintainability and following Bootstrap-Vue best practices. Changes: - Use LayoutPlugin instead of BContainer, BRow, BCol individually - Use FormPlugin, FormInputPlugin, FormSelectPlugin, etc. for form components - Use ButtonPlugin, TablePlugin, TabsPlugin, etc. for other components - Keep individual icon imports (no group plugin available) - Consolidate all imports into single statement Benefits: - Reduced code from ~170 lines to ~80 lines (53% reduction) - Easier to maintain (add/remove plugins vs individual components) - Follows Bootstrap-Vue recommended tree-shaking approach - Still achieves 53% bundle size reduction vs original Bundle size: - Before refactor: 633 KB (186 KB gzipped) - 55% reduction - After refactor: 667 KB (194 KB gzipped) - 53% reduction - Trade-off: 5% size increase for significantly better maintainability 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR implements tree-shaking for Bootstrap-Vue by replacing the global import with selective component imports, resulting in a 55% reduction in bundle size.
Changes Made
Created Tree-Shakeable Plugin (
src/plugins/bootstrap-vue.js)BVModalPluginfor$bvModalfunctionalityUpdated Main Entry Point (
src/main.js)BootstrapVueandIconsPluginimportsPerformance Impact
Before Tree-Shaking:
After Tree-Shaking:
When Combined with PR #749 (vendor chunking):
bootstrap-vendor: 266 KB (67 KB gzipped) vs 1,164 KB (288 KB gzipped)Components Included
The plugin imports these components based on usage audit:
Layout & Grid: BContainer, BRow, BCol
Forms: BForm, BFormGroup, BFormInput, BFormSelect, BFormSelectOption, BFormCheckbox, BFormInvalidFeedback, BFormText, BFormRow, BInputGroup, BInputGroupAppend
Buttons: BButton, BButtonGroup
Tables: BTable, BTableSimple, BTbody, BTr, BTh, BTd
Tabs: BTabs, BTab
Cards: BCard, BCardText
Modals: BModal (with BVModalPlugin for
$bvModalmethods)Navigation: BNavbar, BNavbarBrand, BNavbarNav, BNavbarToggle, BNavItem, BNavItemDropdown, BNavText
Dropdowns: BDropdownItem, BDropdownItemButton
Other: BAlert, BPagination, BProgress, BSpinner, BOverlay, BCollapse, BLink, BTooltip, BTime
Icons: BIcon, BIconPlusSquareFill, BIconCheckSquareFill, BIconXSquareFill, BIconXCircle, BIconSquareFill, BIconQuestionCircleFill, BIconClipboard, BIconCheckCircle
Compatibility
$bvModalmethods work correctly (msgBoxConfirm,show,hide)Test Plan
npm run build- completes successfully$bvModal.show(),$bvModal.hide(),$bvModal.msgBoxConfirm())Dependencies
This PR works independently but combines optimally with:
Notes
src/plugins/bootstrap-vue.js🤖 Generated with Claude Code