A lightweight Angular library designed to supercharge your third-party script handling.

Supports Angular 15 onwards. Not compatible with versions older than Angular 15.

Effortlessly improve the performance and management of third-party JavaScript, whether inline or external, while minimizing Total Blocking Time (TBT) and First Contentful Paint (FCP) improving page speed and performance.

Designed for both Server-Side Rendering (SSR) and Client-Side Rendering (CSR), ensuring compatibility and flexibility for modern web applications.

Supports multiple loading strategies:

• Eager: Runs scripts as soon as they are available.
• Lazy: Defer execution until the page is fully loaded.
• Idle: Leverages requestIdleCallback to execute when the main thread is free.
• Worker: Runs scripts in a Web Worker for non-blocking execution.

Choose where scripts are appended (head or body), giving you full control over your HTML structure. Call scripts exclusively on a page to page basis or globally based on your need. The scripts are automatically removed from the DOM once the page is destroyed.

Minimal impact on your bundle size with a developer-friendly API that focuses on speed and simplicity.

1. E-Commerce: Enhance loading speed for analytics, payment gateways, and dynamic content.
2. Media & Publishing: Optimize ads, comments plugins, and embedded videos.
3. SaaS Platforms: Load tracking tools and third-party SDKs efficiently.
4. Finance: Ensure secure and performant integrations of banking APIs and fraud detection tools.
5. Education: Optimize learning platforms with third-party integrations like video conferencing or quiz tools.

npm install ngx-script-optimizer

Import the package and include it in your standalone Angular component:

import { ScriptOptimizerComponent } from 'ngx-script-optimizer';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, ScriptOptimizerComponent],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

In your HTML:

<ngx-script-optimizer
  src="https://example.com/api.js"
  (onLoad)="runAfterLoad()"
  renderStrategy="client"
  loadStrategy="lazy"
  appendTo="head"
  contentType="text/javascript"
></ngx-script-optimizer>

For SSR, scripts are rendered and run on the server, becoming part of the initial HTML sent to the browser.

<ngx-script-optimizer
  [scriptContent]="'console.log(\'SSR Script Executed\');'"
  renderStrategy="server"
  loadStrategy="eager"
  appendTo="body"
  contentType="text/javascript"
></ngx-script-optimizer>

Load the script after the page content has finished loading. The lazy load strategy will attach the defer flag to the script tag:

<ngx-script-optimizer
  src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"
  renderStrategy="client"
  loadStrategy="lazy"
  appendTo="head"
  contentType="text/javascript"
  (onLoad)="console.log('Moment.js loaded')"
></ngx-script-optimizer>

Execute the script when the browser's main thread is idle:

<ngx-script-optimizer
  [scriptContent]="'console.log(\'Idle Script Executed\');'"
  renderStrategy="client"
  loadStrategy="idle"
  appendTo="head"
  contentType="text/javascript"
></ngx-script-optimizer>

Run a script in a Web Worker:

<ngx-script-optimizer
  [scriptContent]="`onmessage = function(e) {
    const result = e.data.num1 * e.data.num2;
    postMessage(result);
  };`"
  renderStrategy="client"
  loadStrategy="worker"
  appendTo="body"
  contentType="text/javascript"
></ngx-script-optimizer>

• Render Strategy: server
• Load Strategy: lazy
• Append To: head
• Content Type: text/javascript

Feel free to contribute to this library! Raise issues, suggest features, or submit pull requests.

This project is licensed under the MIT License.