build: Add async chunk names (#2170)

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 = [];
 

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 = {

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,

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");

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 }) => (

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 Authenticated = React.lazy(() =>
-const AuthenticatedRoutes = React.lazy(() => import("./authenticated"));
+  import(/* webpackChunkName: "authenticated" */ "components/Authenticated")
-const KeyedDocument = React.lazy(() => import("scenes/Document/KeyedDocument"));
+);
-const Login = React.lazy(() => import("scenes/Login"));
+const AuthenticatedRoutes = React.lazy(() =>
-const Logout = React.lazy(() => import("scenes/Logout"));
+  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 (

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