bcgov / bcgov/entity

COOPS-UI: should use a-la-carte Vuetify components to reduce app load size

Open
#1,828 4 comments 0 reactions 3 assignees Claimed by @sutherlanda View on GitHub
ENTITY - DO NOT USE Priority2
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'
},
...
};
```

![webpack bundle analyzer.PNG](https://images.zenhubusercontent.com/5d0a7edda4644173e93bf808/f1211ba3-015e-444c-807e-260290f905e9)

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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.