From 20cab72d494a371b158985af14179d79b67e869a Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Tue, 27 Apr 2021 13:43:29 -0700 Subject: [PATCH] Revert "build(webpack): Change webpack to have smaller chunks and make all entries async (#25566)" This reverts commit b4fef9f019a907d6eb46c9856f695e1679f35675. --- src/sentry/templates/sentry/bases/react.html | 1 + src/sentry/templates/sentry/layout.html | 3 ++ static/app/bootstrap/index.tsx | 31 ---------------- static/app/index.tsx | 37 ++++++++++++++----- .../app/views/integrationPipeline/index.tsx | 8 ++-- static/app/views/integrationPipeline/init.tsx | 5 --- webpack.config.js | 29 ++++++++++++--- 7 files changed, 59 insertions(+), 55 deletions(-) delete mode 100644 static/app/bootstrap/index.tsx delete mode 100644 static/app/views/integrationPipeline/init.tsx diff --git a/src/sentry/templates/sentry/bases/react.html b/src/sentry/templates/sentry/bases/react.html index a5057a9b63a21a..e25065e76d433d 100644 --- a/src/sentry/templates/sentry/bases/react.html +++ b/src/sentry/templates/sentry/bases/react.html @@ -1 +1,2 @@ {% extends "sentry/base-react.html" %} +{% load sentry_assets %} diff --git a/src/sentry/templates/sentry/layout.html b/src/sentry/templates/sentry/layout.html index 7b5bdd004b0eed..3cade9496c95f8 100644 --- a/src/sentry/templates/sentry/layout.html +++ b/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 %} diff --git a/static/app/bootstrap/index.tsx b/static/app/bootstrap/index.tsx deleted file mode 100644 index 9a1cafcf771701..00000000000000 --- a/static/app/bootstrap/index.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import {Config} from 'app/types'; - -const BOOTSTRAP_URL = '/api/client-config/'; - -const bootApplication = (data: Config) => { - window.csrfCookieName = data.csrfCookieName; - - return data; -}; - -async function bootWithHydration() { - const response = await fetch(BOOTSTRAP_URL); - const data: Config = await response.json(); - - window.__initialData = data; - - return bootApplication(data); -} - -export async function bootstrap() { - 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) { - return await bootWithHydration(); - } - - return bootApplication(bootstrapData); -} diff --git a/static/app/index.tsx b/static/app/index.tsx index 48f8d15ea466f3..925b9480c06e9f 100644 --- a/static/app/index.tsx +++ b/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); +} diff --git a/static/app/views/integrationPipeline/index.tsx b/static/app/views/integrationPipeline/index.tsx index 0f8e528f4e6b86..13c468c24a8220 100644 --- a/static/app/views/integrationPipeline/index.tsx +++ b/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); diff --git a/static/app/views/integrationPipeline/init.tsx b/static/app/views/integrationPipeline/init.tsx deleted file mode 100644 index 13c468c24a8220..00000000000000 --- a/static/app/views/integrationPipeline/init.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import 'focus-visible'; - -import {initializePipelineView} from 'app/bootstrap/initializePipelineView'; - -initializePipelineView(window.__initialData); diff --git a/webpack.config.js b/webpack.config.js index 3bb3c0027ca9de..c4ba14133d4983 100644 --- a/webpack.config.js +++ b/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