bcgov / bcgov/entity

COOPS-UI: investigate lazy loading / dynamic imports

Open
#1,890 2 comments 0 reactions 0 assignees View on GitHub
ENTITY - DO NOT USE Priority2
Dominant language
JavaScript
Stars
23
Forks
62
Avg merge
24m
Merged PRs (30d)
1

Description

## Description:
"Lazy loading" of app components should be investigated/implemented, so that only the minimal app loads initially, and the rest of the components can load when it known that a redirect is not forthcoming. If possibly, this should include dependencies (vendor packages), CSS, etc.

See:
https://cli.vuejs.org/guide/html-and-static-assets.html#preload
https://itnext.io/vue-js-app-performance-optimization-part-3-lazy-loading-vuex-modules-ed67cf555976

Also, "dynamic imports" may improve performance similary. See:
https://webpack.js.org/guides/code-splitting/#dynamic-imports
https://www.sitepoint.com/vue-async-components/

See also #1823 (vendor chunk size).

**Dependencies**
Webpack configuration

**Acceptance Criteria**
1. Web app loads correctly
2. Web app loads faster than without lazy loading

**Validation Rules**
None

Ready to Build (DoR):
- [ ] Stakeholders have approved
- [ ] User story completed (full flow of business rules, happy and alternate paths etc.)
- [ ] What are the dependencies
- [ ] Validation rules defined (UI, Data, Role-Action)
- [ ] Is a formal UAT required
- [ ] Acceptance Criteria well defined in tickets (Story level) QA can confirm or deny
- [ ] Reference BA checklist for this story (functional description captured ?)

Acceptance / DoD:
- [ ] PR to remove feature flags created
- [ ] Check Requirements against completed stories
- [ ] Completed stories verified in Dev/Test/Prod
- [ ] Confirm Test cases built and succeeding
- [ ] Confirm successful End-End runs
- [ ] No regression
- [ ] All Linters passed
- [ ] Test coverage and Test ID acceptable by Product owner
- [ ] Ticket merged to master or story branch
- [ ] Add / maintain selectors for QA purposes
- [ ] Add PR numbers - If available
- [ ] All tests passed (Jest, Pytest, Postman)
- [ ] Developer to list Config changes/ Update documents and designs
- [ ] 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.