enable lazy-loading of gitgraph.js (#9036)

- moved gitgraph.js to web_src and made it importable and es6-compatible
- created new webpack chunk for gitgraph
- enabled CSS loader in webpack
- enabled async/await syntax via regenerator-runtime
- added script to ensure webpack chunks are loaded correctly
- disable terser's comment extraction to prevent .LICENCE files

gitgraph.js has many issues:

1. it is incompatible with ES6 because of strict-mode violations
1. it does not export anything
1. it's css has weird styles like for `body`
1. it is not available on npm

I fixed points 1-3 in our version so it's now loadable in webpack. We should eventually consider alternatives.

4 files changed, 31 insertions, 15 deletions

diff --git a/web_src/js/draw.js b/web_src/js/draw.js
deleted file mode 100644
index bb9c7f28c7..0000000000
--- a/web_src/js/draw.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/* globals gitGraph */
-
-$(() => {
-  const graphList = [];
-
-  if (!document.getElementById('graph-canvas')) {
-    return;
-  }
-
-  $('#graph-raw-list li span.node-relation').each(function () {
-    graphList.push($(this).text());
-  });
-
-  gitGraph(document.getElementById('graph-canvas'), graphList);
-});
diff --git a/web_src/js/gitGraph.js b/web_src/js/gitGraph.js
new file mode 100644
index 0000000000..cfa466d8c8
--- /dev/null
+++ b/web_src/js/gitGraph.js
@@ -0,0 +1,16 @@
+$(async () => {
+  const graphCanvas = document.getElementById('graph-canvas');
+  if (!graphCanvas) return;
+
+  const [{ default: gitGraph }] = await Promise.all([
+    import(/* webpackChunkName: "gitgraph" */'../vendor/gitgraph.js/gitgraph.custom.js'),
+    import(/* webpackChunkName: "gitgraph" */'../vendor/gitgraph.js/gitgraph.custom.css'),
+  ]);
+
+  const graphList = [];
+  $('#graph-raw-list li span.node-relation').each(function () {
+    graphList.push($(this).text());
+  });
+
+  gitGraph(graphCanvas, graphList);
+});
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 704647d9c4..671c66f689 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -2,6 +2,9 @@
 /* exported timeAddManual, toggleStopwatch, cancelStopwatch, initHeatmap */
 /* exported toggleDeadlineForm, setDeadline, updateDeadline, deleteDependencyModal, cancelCodeComment, onOAuthLoginClick */
 
+import './publicPath';
+import './gitGraph';
+
 function htmlEncode(text) {
   return jQuery('<div />').text(text).html();
 }
diff --git a/web_src/js/publicPath.js b/web_src/js/publicPath.js
new file mode 100644
index 0000000000..5d277e442a
--- /dev/null
+++ b/web_src/js/publicPath.js
@@ -0,0 +1,12 @@
+/* This sets up webpack's chunk loading to load resources from the same
+  directory where it loaded index.js from. This file must be imported
+  before any lazy-loading is being attempted. */
+
+if (document.currentScript && document.currentScript.src) {
+  const url = new URL(document.currentScript.src);
+  __webpack_public_path__ = `${url.pathname.replace(/\/[^/]*$/, '')}/`;
+} else {
+  // compat: IE11
+  const script = document.querySelector('script[src*="/index.js"]');
+  __webpack_public_path__ = `${script.getAttribute('src').replace(/\/[^/]*$/, '')}/`;
+}