optimize bundle sizes

frontend/app/common/constants.config.ts

@@ -2,4 +2,6 @@ export const BASE_URL: string =
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ((window as any).remark_config && (window as any).remark_config.host) || process.env.REMARK_URL!;
 export const NODE_ID: string = process.env.REMARK_NODE!;
+export const API_BASE = '/api/v1';
 export const COMMENT_NODE_CLASSNAME_PREFIX = 'remark42__comment-';
+export const COUNTER_NODE_CLASSNAME = 'remark42__counter';

frontend/app/common/constants.ts

@@ -2,9 +2,8 @@ import { Sorting, AuthProvider, BlockingDuration, Theme } from './types';
 import * as configConstant from './constants.config';
 
 export const BASE_URL = configConstant.BASE_URL;
-export const API_BASE = '/api/v1';
+export const API_BASE = configConstant.API_BASE;
 export const NODE_ID = configConstant.NODE_ID;
-export const COUNTER_NODE_CLASSNAME = 'remark42__counter';
 export const COMMENT_NODE_CLASSNAME_PREFIX = configConstant.COMMENT_NODE_CLASSNAME_PREFIX;
 export const LAST_COMMENTS_NODE_CLASSNAME = 'remark42__last-comments';
 export const DEFAULT_LAST_COMMENTS_MAX = 15;

frontend/app/common/polyfills.ts

@@ -1,5 +1,5 @@
-import 'intersection-observer';
-import 'core-js/es/promise';
+import 'regenerator-runtime/runtime';
+import 'es6-promise/auto';
 import 'focus-visible';
 import '@webcomponents/custom-elements';
 import './closest-polyfill';
@@ -15,16 +15,29 @@ export default async function loadPolyfills() {
     )
       return;
 
-    await import(/* webpackChunkName: "polyfills" */ 'core-js').then();
+    await import(/* webpackChunkName: "core-js" */ 'core-js').then();
     return;
   };
 
   const fillFetch = async () => {
     if ('fetch' in window) return;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    await import(/* webpackChunkName: "polyfills" */ 'whatwg-fetch' as any).then();
+    await import(/* webpackChunkName: "whatwg-fetch" */ 'whatwg-fetch' as any).then();
   };
 
-  await Promise.all([fillCoreJs(), fillFetch()]);
+  const fillIntersectionObserver = async () => {
+    if (
+      'IntersectionObserver' in window &&
+      'IntersectionObserverEntry' in window &&
+      'intersectionRatio' in window.IntersectionObserverEntry.prototype
+    ) {
+      return;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    await import(/* webpackChunkName: "intersection-observer" */ 'intersection-observer' as any).then();
+  };
+
+  await Promise.all([fillCoreJs(), fillFetch(), fillIntersectionObserver()]);
   return;
 }