feat: [ts-starter #9] create a minimal bootstrap entry point

src/App.tsx

@@ -6,12 +6,53 @@ const Title = styled.h1`
   color: #666;
 `;
 
+const Article = styled.div`
+  margin: 20px;
+  padding: 10px;
+  background: #777;
+  color: #ddd;
+`;
+
 function App() {
   return (
     <>
       <GlobalStyles />
       <Title>Welcome</Title>
       <p>Use this as a starting point to develop your own application :-)</p>
+      <Article>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi nihil
+        modi similique. Deserunt repellendus animi nostrum, nulla fugiat quia
+        doloremque molestias, deleniti distinctio at illum! Distinctio quibusdam
+        dolorum adipisci illum! Maxime accusantium nemo quod minima labore,
+        soluta repudiandae, illum suscipit obcaecati debitis magnam cum iste
+        deserunt, cumque odit in commodi aperiam at esse culpa voluptatibus a?
+        Aut atque distinctio quo? Et eveniet saepe velit voluptate quia nobis.
+        Minima commodi quae esse doloremque repudiandae repellendus odit dolorum
+        sed labore illo ab, quia nulla ipsam numquam debitis, quam, consequuntur
+        nisi nam dolore! Dolore eveniet eaque natus excepturi alias aperiam
+        quas. Mollitia ab libero, adipisci accusamus laborum excepturi molestiae
+        aut ullam dolores ipsa ipsam consectetur harum minus dolor, placeat
+        facere, recusandae ut autem. Eligendi, iste odio veritatis reiciendis
+        aperiam sapiente fugiat optio exercitationem incidunt eaque, nulla
+        quibusdam earum sit, ea perspiciatis asperiores autem doloremque
+        delectus ipsa eum natus placeat ratione? At, nisi amet. Totam nam illum,
+        corporis sit laborum ipsam, modi perferendis vitae porro ea et dolorum
+        omnis libero explicabo. Ratione, qui. Consequuntur similique, sequi
+        soluta cupiditate vel a ut sunt vitae! Incidunt. Rerum quas aliquam,
+        nesciunt beatae libero voluptatem iste, ducimus, tenetur ab recusandae
+        quam inventore maxime autem quibusdam repellat magni. Ab quam obcaecati
+        reiciendis cupiditate saepe possimus inventore necessitatibus aspernatur
+        quo. Adipisci ipsum ad odio totam ratione, dolor neque ipsam eveniet nam
+        aliquid quos fugiat, animi minima. Minima iure dolore minus, repellat
+        iste vitae dignissimos deleniti mollitia quos necessitatibus explicabo
+        temporibus? Autem ipsam, assumenda perferendis eius quasi vel nisi natus
+        incidunt, quo deserunt iure cupiditate excepturi nemo commodi,
+        exercitationem voluptatum modi sequi sit laborum voluptate. Repudiandae
+        eligendi iure enim porro a? Repellat, exercitationem. Doloremque neque
+        officiis repudiandae aperiam, tempore facere iste eveniet atque.
+        Quisquam eveniet similique neque inventore labore reiciendis laboriosam
+        fuga, est tenetur, earum assumenda, amet repudiandae nulla quas ea?
+      </Article>
     </>
   );
 }

src/bootstrap.tsx

@@ -0,0 +1,18 @@
+import { lazy, Suspense } from "react";
+import { createRoot } from "react-dom/client";
+import { ErrorBoundary } from "react-error-boundary";
+
+const Index = lazy(async () => import("./index"));
+const containerId = "root";
+const container = document.getElementById(containerId);
+if (!container) {
+  throw Error(`couldn't find element with id ${containerId}!`);
+}
+const root = createRoot(container);
+root.render(
+  <ErrorBoundary fallback={<div>Something went wrong...</div>}>
+    <Suspense fallback="loading">
+      <Index />
+    </Suspense>
+  </ErrorBoundary>,
+);

src/index.tsx

@@ -1,18 +1,15 @@
 import { lazy, Suspense } from "react";
-import { createRoot } from "react-dom/client";
+import type { ReactElement } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 
 const App = lazy(async () => import("./App"));
-const containerId = "root";
-const container = document.getElementById(containerId);
-if (!container) {
-  throw Error(`couldn't find element with id ${containerId}!`);
+
+export default function Index(): ReactElement {
+  return (
+    <ErrorBoundary fallback={<div>shit hit the fan bruv!</div>}>
+      <Suspense fallback="loading">
+        <App />
+      </Suspense>
+    </ErrorBoundary>
+  );
 }
-const root = createRoot(container);
-root.render(
-  <ErrorBoundary fallback={<div>shit hit the fan bruv!</div>}>
-    <Suspense fallback="loading">
-      <App />
-    </Suspense>
-  </ErrorBoundary>,
-);

webpack.config.mjs

@@ -52,7 +52,7 @@ function webpackConfig(_env, { mode = "development" }) {
   return {
     mode,
     devtool: isDevelopment ? "eval-source-map" : "source-map",
-    entry: "./src/index.tsx",
+    entry: "./src/bootstrap.tsx",
     devServer: {
       hot: true,
       historyApiFallback: true,
@@ -94,6 +94,10 @@ function webpackConfig(_env, { mode = "development" }) {
       }),
       isDevelopment && new ReactRefreshWebpackPlugin(),
     ].filter(Boolean),
+    performance: {
+      maxEntrypointSize: 150000,
+      hints: "warning",
+    },
   };
 }