From 082ced30729205e94fe9da192d3f7c897e681d3a Mon Sep 17 00:00:00 2001
From: Viorel Cojocaru <vio@beanon.com>
Date: Fri, 4 Jun 2021 07:01:23 +0200
Subject: [PATCH] build: Add async chunk names (#2170)

---
 app/components/Editor.js                      |  4 +++-
 app/components/IconPicker.js                  |  5 ++++-
 app/components/Time.js                        |  4 +++-
 app/index.js                                  |  2 +-
 app/routes/authenticated.js                   |  4 +++-
 app/routes/index.js                           | 22 ++++++++++++++-----
 app/scenes/Settings/components/PeopleTable.js |  4 +++-
 7 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/app/components/Editor.js b/app/components/Editor.js
index 07542ba3..eb7898c2 100644
--- a/app/components/Editor.js
+++ b/app/components/Editor.js
@@ -15,7 +15,9 @@ import { isModKey } from "utils/keyboard";
 import { uploadFile } from "utils/uploadFile";
 import { isInternalUrl } from "utils/urls";
 
-const RichMarkdownEditor = React.lazy(() => import("rich-markdown-editor"));
+const RichMarkdownEditor = React.lazy(() =>
+  import(/* webpackChunkName: "rich-markdown-editor" */ "rich-markdown-editor")
+);
 
 const EMPTY_ARRAY = [];
 
diff --git a/app/components/IconPicker.js b/app/components/IconPicker.js
index 2b6b0940..b553c6f4 100644
--- a/app/components/IconPicker.js
+++ b/app/components/IconPicker.js
@@ -32,7 +32,10 @@ import NudeButton from "components/NudeButton";
 const style = { width: 30, height: 30 };
 
 const TwitterPicker = React.lazy(() =>
-  import("react-color/lib/components/twitter/Twitter")
+  import(
+    /* webpackChunkName: "twitter-picker" */
+    "react-color/lib/components/twitter/Twitter"
+  )
 );
 
 export const icons = {
diff --git a/app/components/Time.js b/app/components/Time.js
index a7e56276..5ed0d931 100644
--- a/app/components/Time.js
+++ b/app/components/Time.js
@@ -2,7 +2,9 @@
 import distanceInWordsToNow from "date-fns/distance_in_words_to_now";
 import * as React from "react";
 
-const LocaleTime = React.lazy(() => import("components/LocaleTime"));
+const LocaleTime = React.lazy(() =>
+  import(/* webpackChunkName: "locale-time" */ "components/LocaleTime")
+);
 
 type Props = {
   dateTime: string,
diff --git a/app/index.js b/app/index.js
index 08055689..cec7c16c 100644
--- a/app/index.js
+++ b/app/index.js
@@ -79,7 +79,7 @@ window.addEventListener("load", async () => {
   if (!env.GOOGLE_ANALYTICS_ID || !window.ga) return;
 
   // https://github.com/googleanalytics/autotrack/issues/137#issuecomment-305890099
-  await import("autotrack/autotrack.js");
+  await import(/** webpackChunkName "autotrack" */ "autotrack/autotrack.js");
 
   window.ga("require", "outboundLinkTracker");
   window.ga("require", "urlChangeTracker");
diff --git a/app/routes/authenticated.js b/app/routes/authenticated.js
index 2168bac5..876cadcf 100644
--- a/app/routes/authenticated.js
+++ b/app/routes/authenticated.js
@@ -20,7 +20,9 @@ import Route from "components/ProfiledRoute";
 import SocketProvider from "components/SocketProvider";
 import { matchDocumentSlug as slug } from "utils/routeHelpers";
 
-const SettingsRoutes = React.lazy(() => import("./settings"));
+const SettingsRoutes = React.lazy(() =>
+  import(/* webpackChunkName: "settings" */ "./settings")
+);
 
 const NotFound = () => <Search notFound />;
 const RedirectDocument = ({ match }: { match: Match }) => (
diff --git a/app/routes/index.js b/app/routes/index.js
index 1262a68f..f3d93a35 100644
--- a/app/routes/index.js
+++ b/app/routes/index.js
@@ -6,11 +6,23 @@ import FullscreenLoading from "components/FullscreenLoading";
 import Route from "components/ProfiledRoute";
 import { matchDocumentSlug as slug } from "utils/routeHelpers";
 
-const Authenticated = React.lazy(() => import("components/Authenticated"));
-const AuthenticatedRoutes = React.lazy(() => import("./authenticated"));
-const KeyedDocument = React.lazy(() => import("scenes/Document/KeyedDocument"));
-const Login = React.lazy(() => import("scenes/Login"));
-const Logout = React.lazy(() => import("scenes/Logout"));
+const Authenticated = React.lazy(() =>
+  import(/* webpackChunkName: "authenticated" */ "components/Authenticated")
+);
+const AuthenticatedRoutes = React.lazy(() =>
+  import(/* webpackChunkName: "authenticated-routes" */ "./authenticated")
+);
+const KeyedDocument = React.lazy(() =>
+  import(
+    /* webpackChunkName: "keyed-document" */ "scenes/Document/KeyedDocument"
+  )
+);
+const Login = React.lazy(() =>
+  import(/* webpackChunkName: "login" */ "scenes/Login")
+);
+const Logout = React.lazy(() =>
+  import(/* webpackChunkName: "logout" */ "scenes/Logout")
+);
 
 export default function Routes() {
   return (
diff --git a/app/scenes/Settings/components/PeopleTable.js b/app/scenes/Settings/components/PeopleTable.js
index 898aacc3..942302d0 100644
--- a/app/scenes/Settings/components/PeopleTable.js
+++ b/app/scenes/Settings/components/PeopleTable.js
@@ -12,7 +12,9 @@ import Time from "components/Time";
 import useCurrentUser from "hooks/useCurrentUser";
 import UserMenu from "menus/UserMenu";
 
-const Table = React.lazy<TableProps>(() => import("components/Table"));
+const Table = React.lazy<TableProps>(() =>
+  import(/* webpackChunkName: "table" */ "components/Table")
+);
 
 type Props = {|
   ...$Diff<TableProps, { columns: any }>,