COOPS-UI: should use a-la-carte Vuetify components to reduce app load size
- Dominant language
- JavaScript
- Stars
- 23
- Forks
- 62
- Avg merge
- 24m
- Merged PRs (30d)
- 1
Description
## Description:
The coops-ui vendors chunk size is excessive (4.2 MB) as seen in the dist/js folder after `npm run build` (or in dev tools network tab). More detail can be seen by loading the Webpack Bundle Analyzer Plugin:
```
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
configureWebpack: {
plugins: [
new BundleAnalyzerPlugin()
],
devtool: 'cheap-module-eval-source-map'
},
...
};
```

One (relatively) easy gain would be to use so-called a-la-carte Vuetify components (aka tree-shaking to determine only those components needed). Ref: https://vuetifyjs.com/en/customization/a-la-carte
I tried to get this working quickly but was unable... hence this ticket.
See also #1823 (vendor chunk size).
**Dependencies**
- Vuetify
- Webpack (and plugins)
- possibly sbc-components
**Acceptance Criteria**
coops-ui loads correctly locally and when deployed!
**Validation Rules**
N/A
Ready to Build (DoR):
- [ ] Stakeholders have approved
- [ ] User story completed
- [ ] What are the dependencies
- [ ] Validation rules defined (UI, Data, Role-Action)
- [ ] Is a formal UAT required
Acceptance / DoD:
- [ ] Design / Solution accepted by Product Owner
- [ ] Acceptance criteria has been defined (happy path, known sad paths)
- [ ] Test coverage acceptable
- [ ] Peer Reviewed
- [ ] Accessibility reviewed and acceptable [checklist](https://github.com/bcgov/entity/docs/coding-standards/accessibility.md)
- [ ] UX Approved
- [ ] PR Accepted
- [ ] Production burn in completed
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.