Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lazy load documentation modules #698

Merged
merged 2 commits into from
Jan 16, 2020
Merged

Lazy load documentation modules #698

merged 2 commits into from
Jan 16, 2020

Conversation

Splaktar
Copy link
Member

This PR implements the first round of lazy loading for the site. In general, the only significant impact is on the bundle size reduction for the home page and the guide list.

The guides themselves should also see a significant reduction in bundle size, but they depend upon the DocViewer which depends on the ExampleViewer which pulls in the full @angular/components-examples along with every Angular Material and CDK component.

This is the first step towards solving #176, which calls out the concerns with ExampleViewer. ExampleViewer isn't tied to a route, so we can't lazy load it the normal way.

Most Guide's only need the DocViewer, but the following 3 guides do actually require the ExampleViewer:

  • Creating a custom form field control
  • Using elevation helpers
  • Creating a custom stepper using the CdkStepper

Further investigation is needed to

  • determine the best way to de-couple these two viewer components
  • determine the best approach for lazy loading the ExampleViewer
  • change the ComponentViewer to only import the components and examples needed for the current component

Impacts

Listed as compressed bundle size on page load with cache disabled in Chrome ("transferred").

Homepage

Before: 600 KB
After: 331 KB
✅ 45% reduction

Guide List

Before: 594 KB
After: 342 KB
✅ 42% reduction

Guide Viewer

Before: 618 KB
After: 640 KB
🚧 3% increase

Component Docs

Before: 627 KB
After: 652 KB
🚧 4% increase

- update a couple services to use `providedIn: 'root'`

Relates to #176
Copy link
Member

@jelbourn jelbourn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@jelbourn jelbourn merged commit dd820e5 into master Jan 16, 2020
@Splaktar Splaktar deleted the lazy-load branch January 17, 2020 00:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants