dev-sampsonorson

Lazy loading techniques and tips in Angular

You can use Dynamic component loader service

• Which respect component module, providers, context

Use "defer" strategies

• Wrap "heavy" libraries with async conditions
• Meaning, wrap your function that need third party libraries in a Promise or Observable and use RxJS to defer the execution. Only executed when subscribed to.

Do lazy loading on router resolver level.

dev-sampsonorson

// Components in ngIf & ngSwitch loaded when used
// With ngxd lib we can create "lazy wrapper"

import { ChangeDetectionStrategy, EventEmitter } from "@angular/core";

// https://www.npmjs.com/package/@ngxd/core
// https://github.com/IndigoSoft/ngxd/issues/30

// You can use Dynamic component loader service
// - Which respect component module, providers, context

dev-sampsonorson

It depends on your use case.

The advantage of not having a separate vendor chunk is that you'll be able to get a smaller bundle size. How much smaller depends on your app. I suggest trying a build with and without the flag to see if there is a significant difference.

On the other hand, the main advantage of having vendorChunk enabled is that the users will be able to only download the changed client code without the third party code(Which are less likely to be changed often).

In summary:

Set vendorChunk to true if:

• You plan on updating the client code often without changing much of the third party libraries.

dev-sampsonorson

// https://webpack.js.org/api/module-methods/#magic-comments
// https://webpack.js.org/guides/code-splitting/#prefetchingpreloading-modules

// Multiple pssible targets
import(
    /* webpackInclude: /\.json$/ */
    /* webpackExclude: /\.skip-import\.json$/ */
    /* webpackPrefetch: true */
    `./locale/${language}`
);

dev-sampsonorson

const language = detectVisitorLanguage();

// - import(someVariable) is not supported; it must be a constant
// - Some path must be specified
// - We can specify a directory or set of files
//   - Everything that could be requested (potentially match that path) is included (in the bundle during build time)

// https://webpack.js.org/api/module-methods/#dynamic-expressions-in-import

import(`./locale/${language}.json`).then((module) => {

dev-sampsonorson

// hightlight-language.ts
import hljs from 'highlight.js/lib/core';
import bash from 'highlight.js/lib/languages/bash';
import markdown from 'highlight.js/lib/languages/markdown';
import scss from 'highlight.js/lib/languages/scss';
import typescript from 'highlight.js/lib/languages/typscript';
import yaml from 'highlight.js/lib/languages/yaml';

const langHightlighters = {
    bash,

dev-sampsonorson

@Pipe({ name: 'markdownToHtml' })
export class MarkdownToHtmlPipe implements PipeTransform {
    transform(markdown: string): Observable<string> {
        return markdown 
          // import(...) will only run once per instance
          // The `marked` library will only be imported if the template
          // has markdown; <div class="markdown-container" [innerHTML]="markdownContent | markdownToHtml | async | sanitize: 'html'"></div>
          ? from(import(/* webpackPrefetch: true */ 'marked')).pipe(map(({ parse }) => parse(markdown)))
          : of('')
    }

dev-sampsonorson

{
  //...
  "architect": {
    "build": {
      //...
      "configuration": {
        "production": {
          "sourceMap": {
            "script": true,
            "hidden": false,

dev-sampsonorson

{
    //...
    "architect": {
      "build": {
        //...
        "configuration": {
          "production": {
            "namedChunks": true
          }
        }

dev-sampsonorson

import { Injectable } from '@angular/core';
import { JwtHelperService } from '@auth0/angular-jwt';
import { interval } from 'rxjs/internal/observable/interval';
import { of } from 'rxjs/internal/observable/of';
import { map, startWith, switchMap } from 'rxjs/operators';
import { Observable } from 'rxjs/Rx';
import { LoginResponseVm, LoginVm, SecurityClient } from '../app.api';
import { LocalStorageService } from './local-storage.service';

@Injectable({