From 3196b6a371b4b21a7a166052040e7b3ffd08957b Mon Sep 17 00:00:00 2001 From: arturovt Date: Fri, 28 Feb 2025 18:47:32 +0200 Subject: [PATCH] perf: tree-shake `console.*` calls in production This commit wraps calls to `console.*` with `ngDevMode`, an Angular CLI-provided compile-time variable. `isDevMode()` is a runtime function that still gets bundled into the JS file. --- .../src/lib/ngx-page-scroll-core.module.ts | 12 +++--- .../src/lib/providers/config.provider.ts | 4 +- .../lib/providers/ngx-page-scroll.service.ts | 38 ++++++++++++------- .../ngx-page-scroll-core/src/ng-dev-mode.ts | 12 ++++++ .../ngx-page-scroll-core/src/public-api.ts | 2 + 5 files changed, 46 insertions(+), 22 deletions(-) create mode 100644 projects/ngx-page-scroll-core/src/ng-dev-mode.ts diff --git a/projects/ngx-page-scroll-core/src/lib/ngx-page-scroll-core.module.ts b/projects/ngx-page-scroll-core/src/lib/ngx-page-scroll-core.module.ts index 2a4d192e..c69785d3 100644 --- a/projects/ngx-page-scroll-core/src/lib/ngx-page-scroll-core.module.ts +++ b/projects/ngx-page-scroll-core/src/lib/ngx-page-scroll-core.module.ts @@ -1,20 +1,18 @@ import { ModuleWithProviders, NgModule } from '@angular/core'; -import { PageScrollService } from './providers/ngx-page-scroll.service'; import { NGXPS_CONFIG } from './providers/config.provider'; import { PageScrollConfig } from './types/page-scroll.config'; @NgModule({ - providers: [ - PageScrollService, - {provide: NGXPS_CONFIG, useValue: {}}, - ], + providers: [{ provide: NGXPS_CONFIG, useValue: {} }], }) export class NgxPageScrollCoreModule { - static forRoot(config?: PageScrollConfig): ModuleWithProviders { + static forRoot( + config?: PageScrollConfig + ): ModuleWithProviders { return { ngModule: NgxPageScrollCoreModule, - providers: [PageScrollService, {provide: NGXPS_CONFIG, useValue: config}], + providers: [{ provide: NGXPS_CONFIG, useValue: config }], }; } } diff --git a/projects/ngx-page-scroll-core/src/lib/providers/config.provider.ts b/projects/ngx-page-scroll-core/src/lib/providers/config.provider.ts index dfae9722..e7a2c00d 100644 --- a/projects/ngx-page-scroll-core/src/lib/providers/config.provider.ts +++ b/projects/ngx-page-scroll-core/src/lib/providers/config.provider.ts @@ -1,7 +1,9 @@ import { InjectionToken } from '@angular/core'; import { PageScrollConfig } from '../types/page-scroll.config'; -export const NGXPS_CONFIG = new InjectionToken('ngxps_config'); +export const NGXPS_CONFIG = new InjectionToken( + typeof ngDevMode !== 'undefined' && ngDevMode ? 'ngxps_config' : '' +); export const defaultPageScrollConfig: PageScrollConfig = { _interval: 10, diff --git a/projects/ngx-page-scroll-core/src/lib/providers/ngx-page-scroll.service.ts b/projects/ngx-page-scroll-core/src/lib/providers/ngx-page-scroll.service.ts index 28537816..c4d11b3c 100644 --- a/projects/ngx-page-scroll-core/src/lib/providers/ngx-page-scroll.service.ts +++ b/projects/ngx-page-scroll-core/src/lib/providers/ngx-page-scroll.service.ts @@ -1,4 +1,4 @@ -import { Inject, Injectable, isDevMode } from '@angular/core'; +import { Inject, Injectable } from '@angular/core'; import { PageScrollConfig } from '../types/page-scroll.config'; import { InterruptReporter, PageScrollInstance, PageScrollOptions } from '../page-scroll-instance'; @@ -84,8 +84,10 @@ export class PageScrollService { if (pageScrollInstance.pageScrollOptions.scrollViews === null || pageScrollInstance.pageScrollOptions.scrollViews.length === 0) { // No scrollViews specified, thus we can't animate anything - if (this.config._logLevel >= 2 || (this.config._logLevel >= 1 && isDevMode())) { - console.warn('No scrollViews specified, thus ngx-page-scroll does not know which DOM elements to scroll'); + if (typeof ngDevMode !== 'undefined' && ngDevMode) { + if (this.config._logLevel >= 1) { + console.warn('No scrollViews specified, thus ngx-page-scroll does not know which DOM elements to scroll'); + } } return; @@ -131,8 +133,10 @@ export class PageScrollService { if (isNaN(pageScrollInstance.distanceToScroll)) { // We weren't able to find the target position, maybe the element does not exist? - if (this.config._logLevel >= 2 || (this.config._logLevel >= 1 && isDevMode())) { - console.log('Scrolling not possible, as we can\'t find the specified target'); + if (typeof ngDevMode !== 'undefined' && ngDevMode) { + if (this.config._logLevel >= 1) { + console.log('Scrolling not possible, as we can\'t find the specified target'); + } } pageScrollInstance.fireEvent(false); @@ -160,11 +164,13 @@ export class PageScrollService { const tooShortInterval = pageScrollInstance.executionDuration <= pageScrollInstance.pageScrollOptions._interval; if (allReadyAtDestination || tooShortInterval) { - if (this.config._logLevel >= 2 || (this.config._logLevel >= 1 && isDevMode())) { - if (allReadyAtDestination) { - console.log('Scrolling not possible, as we can\'t get any closer to the destination'); - } else { - console.log('Scroll duration shorter that interval length, jumping to target'); + if (this.config._logLevel >= 2 || this.config._logLevel >= 1) { + if (typeof ngDevMode !== 'undefined' && ngDevMode) { + if (allReadyAtDestination) { + console.log('Scrolling not possible, as we can\'t get any closer to the destination'); + } else { + console.log('Scroll duration shorter that interval length, jumping to target'); + } } } pageScrollInstance.setScrollPosition(pageScrollInstance.targetScrollPosition); @@ -177,8 +183,10 @@ export class PageScrollService { const alreadyInView = pageScrollInstance.targetScrollPosition > pageScrollInstance.startScrollPosition && pageScrollInstance.targetScrollPosition <= pageScrollInstance.startScrollPosition + scrollRange; if (alreadyInView) { - if (this.config._logLevel >= 2 || (this.config._logLevel >= 1 && isDevMode())) { - console.log('Not scrolling, as target already in view'); + if (typeof ngDevMode !== 'undefined' && ngDevMode) { + if (this.config._logLevel >= 1) { + console.log('Not scrolling, as target already in view'); + } } pageScrollInstance.fireEvent(true); @@ -215,8 +223,10 @@ export class PageScrollService { instance.distanceToScroll, instance.executionDuration)); } - if (this.config._logLevel >= 5 && isDevMode()) { - console.warn('Scroll Position: ' + newScrollPosition); + if (typeof ngDevMode !== 'undefined' && ngDevMode) { + if (this.config._logLevel >= 5) { + console.warn('Scroll Position: ' + newScrollPosition); + } } // Set the new scrollPosition to all scrollViews elements if (!instance.setScrollPosition(newScrollPosition)) { diff --git a/projects/ngx-page-scroll-core/src/ng-dev-mode.ts b/projects/ngx-page-scroll-core/src/ng-dev-mode.ts new file mode 100644 index 00000000..6eae330e --- /dev/null +++ b/projects/ngx-page-scroll-core/src/ng-dev-mode.ts @@ -0,0 +1,12 @@ +/** @internal */ +declare global { + // Indicates whether the application is operating in development mode. + // `ngDevMode` is a global flag set by Angular CLI. + // https://github.com/angular/angular-cli/blob/9ceca0c4de1f351133c7c7df9e44c4b7a220ae8b/packages/angular/build/src/tools/esbuild/application-code-bundle.ts#L600 + const ngDevMode: boolean; +} + +// This will be tree-shaken when built for production, as it is an empty object. +// Thus, the `ng-dev-mode.ts` file could be treated as a module for type +// augmentation (`declare global`) by the bundler. +export default {}; diff --git a/projects/ngx-page-scroll-core/src/public-api.ts b/projects/ngx-page-scroll-core/src/public-api.ts index 160263af..9a7d495a 100644 --- a/projects/ngx-page-scroll-core/src/public-api.ts +++ b/projects/ngx-page-scroll-core/src/public-api.ts @@ -2,6 +2,8 @@ * Public API Surface of ngx-page-scroll-core */ +import './ng-dev-mode'; + export { NgxPageScrollCoreModule } from './lib/ngx-page-scroll-core.module'; export { defaultPageScrollConfig, NGXPS_CONFIG } from './lib/providers/config.provider';