enhance(bundle-size): give names to all manual chunks

client/src/app.tsx

@@ -37,12 +37,24 @@ import { Newsletter } from "./newsletter";
 import { Curriculum } from "./curriculum";
 import { useGA } from "./ga-context";
 
-const AllFlaws = React.lazy(() => import("./flaws"));
-const Translations = React.lazy(() => import("./translations"));
-const WritersHomepage = React.lazy(() => import("./writers-homepage"));
-const Sitemap = React.lazy(() => import("./sitemap"));
-const Playground = React.lazy(() => import("./playground"));
-const Observatory = React.lazy(() => import("./observatory"));
+const AllFlaws = React.lazy(
+  () => import(/* webpackChunkName: "flaws" */ "./flaws")
+);
+const Translations = React.lazy(
+  () => import(/* webpackChunkName: "translations" */ "./translations")
+);
+const WritersHomepage = React.lazy(
+  () => import(/* webpackChunkName: "writers-homepage" */ "./writers-homepage")
+);
+const Sitemap = React.lazy(
+  () => import(/* webpackChunkName: "sitemap" */ "./sitemap")
+);
+const Playground = React.lazy(
+  () => import(/* webpackChunkName: "playground" */ "./playground")
+);
+const Observatory = React.lazy(
+  () => import(/* webpackChunkName: "observatory" */ "./observatory")
+);
 
 function Layout({ pageType, children }) {
   const { pathname } = useLocation();

client/src/document/code/ai-explain.ts

@@ -160,7 +160,9 @@ export function addExplainButton(
 
     answers.set(highlighted, container);
 
-    const { render } = await import("./render-md");
+    const { render } = await import(
+      /* webpackChunkName: "ai-explain-md" */ "./render-md"
+    );
 
     explain(
       {

client/src/document/index.tsx

@@ -50,8 +50,13 @@ import { CLIENT_SIDE_NAVIGATION } from "../telemetry/constants";
 // import { useUIStatus } from "../ui-context";
 
 // Lazy sub-components
-const Toolbar = React.lazy(() => import("./toolbar"));
-const MathMLPolyfillMaybe = React.lazy(() => import("./mathml-polyfill"));
+const Toolbar = React.lazy(
+  () => import(/* webpackChunkName: "toolbar" */ "./toolbar")
+);
+const MathMLPolyfillMaybe = React.lazy(
+  () =>
+    import(/* webpackChunkName: "mathml-polyfill-maybe" */ "./mathml-polyfill")
+);
 
 export class HTTPError extends Error {
   public readonly status: number;

client/src/document/mathml-polyfill/index.tsx

@@ -2,7 +2,9 @@ import React from "react";
 
 import "./mathml-font.scss";
 
-const MathMLPolyfill = React.lazy(() => import("./polyfill"));
+const MathMLPolyfill = React.lazy(
+  () => import(/* webpackChunkName: "mathml-polyfill" */ "./polyfill")
+);
 
 // This component gets rendered if the document has MathML in it.
 // But that doesn't mean we necessarily need the CSS polyfill.

client/src/index.tsx

@@ -52,5 +52,7 @@ if (container.firstElementChild) {
 
 // Initialize mdnWorker if there's a service worker already.
 if (navigator?.serviceWorker?.controller && !window.mdnWorker) {
-  import("./settings/mdn-worker").then(({ getMDNWorker }) => getMDNWorker());
+  import(/* webpackChunkName: "mdn-worker" */ "./settings/mdn-worker").then(
+    ({ getMDNWorker }) => getMDNWorker()
+  );
 }

client/src/page-not-found/index.tsx

@@ -4,7 +4,9 @@ import { useLocation } from "react-router-dom";
 import { MainContentContainer } from "../ui/atoms/page-content";
 import "./index.scss";
 
-const FallbackLink = React.lazy(() => import("./fallback-link"));
+const FallbackLink = React.lazy(
+  () => import(/* webpackChunkName: "fallback-link" */ "./fallback-link")
+);
 
 // NOTE! To hack on this component, you have to use a trick to even get to this
 // unless you use the Express server on localhost:5042.

client/src/plus/index.tsx

@@ -14,9 +14,15 @@ import { DocParent } from "../../../libs/types/document";
 import "./index.scss";
 import OfferOverview from "./offer-overview";
 
-const AiHelp = React.lazy(() => import("./ai-help"));
-const Collections = React.lazy(() => import("./collections"));
-const Updates = React.lazy(() => import("./updates"));
+const AiHelp = React.lazy(
+  () => import(/* webpackChunkName: "ai-help" */ "./ai-help")
+);
+const Collections = React.lazy(
+  () => import(/* webpackChunkName: "collections" */ "./collections")
+);
+const Updates = React.lazy(
+  () => import(/* webpackChunkName: "updates" */ "./updates")
+);
 
 interface LayoutProps {
   withoutContainer?: boolean;

client/src/plus/offer-overview/offer-overview-subscribe/index.tsx

@@ -17,7 +17,9 @@ import { OFFER_OVERVIEW_CLICK } from "../../../telemetry/constants";
 import LogInLink from "../../../ui/atoms/login-link";
 import React from "react";
 
-const Stripe = React.lazy(() => import("./stripe"));
+const Stripe = React.lazy(
+  () => import(/* webpackChunkName: "stripe" */ "./stripe")
+);
 
 export enum Period {
   Month,

client/src/settings/index.tsx

@@ -9,7 +9,9 @@ import Newsletter from "./newsletter";
 import { ManageAIHelp } from "./ai-help";
 import { useScrollToAnchor } from "../hooks";
 
-const OfflineSettings = React.lazy(() => import("./offline-settings"));
+const OfflineSettings = React.lazy(
+  () => import(/* webpackChunkName: "offline-settings" */ "./offline-settings")
+);
 
 export function Settings() {
   const pageTitle = "Settings";

client/src/site-search/index.tsx

@@ -9,8 +9,12 @@ import "./index.scss";
 import { SidePlacement } from "../ui/organisms/placement";
 import { CLIENT_SIDE_NAVIGATION } from "../telemetry/constants";
 
-const SiteSearchForm = React.lazy(() => import("./form"));
-const SearchResults = React.lazy(() => import("./search-results"));
+const SiteSearchForm = React.lazy(
+  () => import(/* webpackChunkName: "search-form" */ "./form")
+);
+const SearchResults = React.lazy(
+  () => import(/* webpackChunkName: "search-results" */ "./search-results")
+);
 
 export function SiteSearch() {
   const isServer = useIsServer();

client/src/user-context.tsx

@@ -248,7 +248,9 @@ export function UserDataProvider(props: { children: React.ReactNode }) {
 
       // Let's initialize the MDN Worker if applicable.
       if (!window.mdnWorker && data?.offlineSettings?.offline) {
-        import("./settings/mdn-worker").then(({ getMDNWorker }) => {
+        import(
+          /* webpackChunkName: "mdn-worker" */ "./settings/mdn-worker"
+        ).then(({ getMDNWorker }) => {
           const mdnWorker = getMDNWorker();
           if (data?.isSubscriber === false) {
             mdnWorker.clearOfflineSettings();

client/src/writers-homepage/index.tsx

@@ -6,7 +6,9 @@ import { useIsServer, useLocale } from "../hooks";
 import "./index.scss";
 
 // Lazy sub-components
-const ViewedDocuments = React.lazy(() => import("./viewed-documents"));
+const ViewedDocuments = React.lazy(
+  () => import(/* webpackChunkName: "viewed-documents" */ "./viewed-documents")
+);
 
 export default function WritersHomepage() {
   const isServer = useIsServer();