Optimize frontend bundle with vendor chunking and lazy loading - #749
Merged
Conversation
…loading - Add function-based manual vendor chunking to split dependencies: * bootstrap-vendor: Bootstrap + Bootstrap-Vue (~1MB) * vue-vendor: Vue ecosystem (115KB) * utils-vendor: Utilities like lodash (80KB) * websocket-vendor: WebSocket library (6KB) * vendor: Other dependencies including jQuery/vuelidate (201KB) - Lazy-load HomeView component instead of eager import - Use CommonJS-safe chunking strategy to avoid watch mode errors Benefits: - Main app bundle reduced from 1,419KB to 64KB (95% reduction) - Better browser caching through vendor separation - Faster initial page load with lazy-loaded routes - Parallel chunk downloads for improved performance 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
github-actions
Bot
added
small-diff
Tim020
added a commit
that referenced
this pull request
Dec 1, 2025
- 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>
7 tasks
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 optimizes the frontend build by implementing vendor chunking and lazy-loading strategies to significantly reduce initial bundle size and improve loading performance.
Changes Made
Manual Vendor Chunking (vite.config.js)
manualChunksconfigurationbootstrap-vendor: Bootstrap + Bootstrap-Vue (~1MB)vue-vendor: Vue ecosystem (115KB)utils-vendor: Utilities like lodash (80KB)websocket-vendor: WebSocket library (6KB)vendor: Other dependencies including jQuery/vuelidate (201KB)Lazy-Loaded Routes (src/router/index.js)
Performance Impact
Before:
After:
Build Compatibility
npm run build)npm run build -- --watch --mode=development)Test Plan
npm run build- completes successfullynpm run build -- --watch --mode=development- no errorsFuture Optimization
This PR implements the "quick wins" for bundle optimization. A follow-up PR will explore Bootstrap-Vue tree-shaking to further reduce the bootstrap-vendor chunk by 30-50%.
🤖 Generated with Claude Code