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;
 }

frontend/app/components/root/in-view/in-view.tsx

@@ -10,22 +10,30 @@ interface State {
   ref: Element | undefined;
 }
 
-const instance_map: WeakMap<Element, Component<Props, State>> = new WeakMap();
+let instanceMap: WeakMap<Element, Component<Props, State>>;
+let observer: IntersectionObserver;
 
-const observer = new IntersectionObserver(
-  entries => {
-    entries.forEach(e => {
-      const instance = instance_map.get(e.target);
-      if (!instance) return;
-      instance.setState({
-        inView: e.isIntersecting,
-      });
-    });
-  },
-  {
-    rootMargin: '50px',
+function getObserver(): { observer: IntersectionObserver; instanceMap: WeakMap<Element, Component<Props, State>> } {
+  if (observer && instanceMap) {
+    return { observer, instanceMap };
   }
-);
+  instanceMap = new WeakMap<Element, Component<Props, State>>();
+  observer = new window.IntersectionObserver(
+    entries => {
+      entries.forEach(e => {
+        const instance = instanceMap.get(e.target);
+        if (!instance) return;
+        instance.setState({
+          inView: e.isIntersecting,
+        });
+      });
+    },
+    {
+      rootMargin: '50px',
+    }
+  );
+  return { observer, instanceMap };
+}
 
 export class InView extends Component<Props, State> {
   state: State = {
@@ -37,13 +45,15 @@ export class InView extends Component<Props, State> {
     if (this.state.ref === nextState.ref) return;
 
     if (this.state.ref instanceof Element) {
+      const { observer, instanceMap } = getObserver();
       observer.unobserve(this.state.ref);
-      instance_map.delete(this.state.ref);
+      instanceMap.delete(this.state.ref);
     }
 
     if (nextState.ref instanceof Element) {
+      const { observer, instanceMap } = getObserver();
       observer.observe(nextState.ref);
-      instance_map.set(nextState.ref, this);
+      instanceMap.set(nextState.ref, this);
     }
   }
 
@@ -58,9 +68,9 @@ export class InView extends Component<Props, State> {
 
   componentWillUnmount() {
     if (!(this.state.ref instanceof Element)) return;
-
+    const { observer, instanceMap } = getObserver();
     observer.unobserve(this.state.ref);
-    instance_map.delete(this.state.ref);
+    instanceMap.delete(this.state.ref);
   }
 
   render() {

frontend/app/counter.ts

@@ -1,9 +1,6 @@
 /* eslint-disable no-console */
 declare let remark_config: CounterConfig;
-
-import loadPolyfills from '@app/common/polyfills';
-import api from './common/api';
-import { COUNTER_NODE_CLASSNAME, BASE_URL } from '@app/common/constants';
+import { COUNTER_NODE_CLASSNAME, BASE_URL, API_BASE } from '@app/common/constants.config';
 import { CounterConfig } from '@app/common/config-types';
 
 if (document.readyState === 'loading') {
@@ -12,11 +9,7 @@ if (document.readyState === 'loading') {
   init();
 }
 
-async function init(): Promise<void> {
-  __webpack_public_path__ = BASE_URL + '/web/';
-
-  await loadPolyfills();
-
+function init(): void {
   const nodes: HTMLElement[] = [].slice.call(document.getElementsByClassName(COUNTER_NODE_CLASSNAME));
 
   if (!nodes) {
@@ -43,7 +36,16 @@ async function init(): Promise<void> {
     return acc;
   }, {});
 
-  api.getCommentsCount(remark_config.site_id, Object.keys(map)).then(res => {
-    res.forEach(item => map[item.url].map(n => (n.innerHTML = item.count.toString(10))));
-  });
+  const oReq = new XMLHttpRequest();
+  oReq.onreadystatechange = function(this: XMLHttpRequest) {
+    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
+      try {
+        const res = JSON.parse(this.responseText) as { url: string; count: number }[];
+        res.forEach(item => map[item.url].map(n => (n.innerHTML = item.count.toString(10))));
+      } catch (e) {}
+    }
+  };
+  oReq.open('POST', `${BASE_URL}${API_BASE}/counts?site=${remark_config.site_id}`, true);
+  oReq.setRequestHeader('Content-Type', 'application/json');
+  oReq.send(JSON.stringify(Object.keys(map)));
 }

frontend/app/last-comments.tsx

@@ -1,7 +1,12 @@
 /* eslint-disable no-console, @typescript-eslint/camelcase */
 /** @jsx createElement */
 declare let remark_config: LastCommentsConfig;
-
+// Must be the first import
+if (process.env.NODE_ENV === 'development') {
+  // Must use require here as import statements are only allowed
+  // to exist at the top of a file.
+  require('preact/debug');
+}
 import loadPolyfills from '@app/common/polyfills';
 import { createElement, render } from 'preact';
 import 'preact/debug';

frontend/app/remark.tsx

@@ -1,8 +1,13 @@
 /** @jsx createElement */
+// Must be the first import
+if (process.env.NODE_ENV === 'development') {
+  // Must use require here as import statements are only allowed
+  // to exist at the top of a file.
+  require('preact/debug');
+}
 import loadPolyfills from '@app/common/polyfills';
 
 import { createElement, render } from 'preact';
-import 'preact/debug';
 import { bindActionCreators } from 'redux';
 import { Provider } from 'react-redux';
 

frontend/app/utils/cmpRef.ts

@@ -1,4 +1,4 @@
-import isEqual from 'lodash/isEqual';
+import isEqual from 'lodash-es/isEqual';
 
 /**
  * Deeply compares two entities,