Revert "build(webpack): Change webpack to have smaller chunks and make all entries async (#25566)"

src/sentry/templates/sentry/bases/react.html

@@ -1 +1,2 @@
 {% extends "sentry/base-react.html" %}
+{% load sentry_assets %}

src/sentry/templates/sentry/layout.html

@@ -49,6 +49,9 @@
   {% manifest_asset_url "sentry" "runtime.js" as asset_url %}
   {% script src=asset_url %}{% endscript %}
 
+  {% manifest_asset_url "sentry" "vendor.js" as asset_url %}
+  {% script src=asset_url %}{% endscript %}
+
   {% block scripts_main_entrypoint %}
     {% manifest_asset_url "sentry" "app.js" as asset_url %}
     {% script src=asset_url data-entry="true" %}{% endscript %}

static/app/index.tsx

@@ -1,12 +1,31 @@
-async function app() {
-  const [{bootstrap}, {initializeMain}] = await Promise.all([
-    import(/* webpackChunkName: "appBootstrap" */ 'app/bootstrap'),
-    import(
-      /* webpackChunkName: "appBootstrapInitializeMain" */ 'app/bootstrap/initializeMain'
-    ),
-  ]);
-  const data = await bootstrap();
+import {Config} from 'app/types';
+
+const BOOTSTRAP_URL = '/api/client-config/';
+
+const bootApplication = (data: Config) => {
+  window.csrfCookieName = data.csrfCookieName;
+
+  // Once data hydration is done we can initialize the app
+  const {initializeMain} = require('./bootstrap/initializeMain');
   initializeMain(data);
+};
+
+async function bootWithHydration() {
+  const response = await fetch(BOOTSTRAP_URL);
+  const data: Config = await response.json();
+
+  window.__initialData = data;
+
+  bootApplication(data);
 }
 
-app();
+const bootstrapData = window.__initialData;
+
+// If __initialData is not already set on the window, we are likely running in
+// pure SPA mode, meaning django is not serving our frontend application and we
+// need to make an API request to hydrate the bootstrap data to boot the app.
+if (bootstrapData === undefined) {
+  bootWithHydration();
+} else {
+  bootApplication(bootstrapData);
+}

static/app/views/integrationPipeline/index.tsx

@@ -1,5 +1,5 @@
-async function integrationPipeline() {
-  return await import(/* webpackChunkName: "integrationPipelineInit" */ './init');
-}
+import 'focus-visible';
 
-integrationPipeline();
+import {initializePipelineView} from 'app/bootstrap/initializePipelineView';
+
+initializePipelineView(window.__initialData);

webpack.config.js

@@ -170,7 +170,7 @@ supportedLocales
       );
 
     localeChunkGroups[group] = {
-      chunks: 'async',
+      chunks: 'initial',
       name: group,
       test: groupTest,
       enforce: true,
@@ -195,6 +195,25 @@ const localeRestrictionPlugins = [
   ),
 ];
 
+/**
+ * Explicit codesplitting cache groups
+ */
+const cacheGroups = {
+  defaultVendors: {
+    name: 'vendor',
+    // This `platformicons` check is required otherwise it will get put into this chunk instead
+    // of `sentry.css` bundle
+    // TODO(platformicons): Simplify this if we move platformicons into repo
+    test: module =>
+      !/platformicons/.test(module.resource) &&
+      /[\\/]node_modules[\\/]/.test(module.resource),
+    priority: -10,
+    enforce: true,
+    chunks: 'initial',
+  },
+  ...localeChunkGroups,
+};
+
 const babelOptions = {...babelConfig, cacheDirectory: true};
 const babelLoaderConfig = {
   loader: 'babel-loader',
@@ -394,11 +413,9 @@ let appConfig = {
       // Which means the app will not load because we'd need these additional chunks to be loaded in our
       // django template.
       chunks: 'async',
-      maxInitialRequests: 10, // (default: 30)
-      maxAsyncRequests: 10, // (default: 30)
-      cacheGroups: {
-        ...localeChunkGroups,
-      },
+      maxInitialRequests: 5,
+      maxAsyncRequests: 7,
+      cacheGroups,
     },
 
     // This only runs in production mode