Performance improvement: stop serving wrapper code (#179)

* Only serve react app in development - Don't serve server code from "webpack serve" - Don't serve iframe wrapper from "webpack serve" - Update "basic" local test to load -impl file, not wrapper
2023-03-10 14:43:48 -05:00
parent 50fc0de433
commit 7fd979aed8
10 changed files with 22 additions and 8 deletions
@@ -3,6 +3,12 @@
  <head>
    <base target="_top" />
    <!-- Add any external scripts and stylesheets here -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
+      rel="stylesheet"
+    />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
@@ -1,6 +1,10 @@
 /* needed to make consistent test snapshots across OSs */
+html {
+  height: 100%;
+}
 body {
-  font-family: Arial !important;
+  font-family: Roboto !important;
+  height: 100%;
 }

 /*
@@ -29,7 +29,7 @@ const webpackDevServerReady = async (process) => {
  console.log('Waiting for Webpack Dev Server to finish loading...');
  return new Promise((resolve) => {
    process.stdout.on('data', (data) => {
-      if (data.includes('DEVELOPMENT: CLIENT - Dialog Demo Bootstrap')) {
+      if (data.includes('CLIENT - Dialog Demo Bootstrap')) {
        resolve();
      }
    });
@@ -56,12 +56,13 @@ describe(`Local setup ${isExtended ? '*extended*' : ''}`, () => {
    if (isExtended) {
      await openAddon(page);
    } else {
-      await page.goto('https://localhost:3000/dialog-demo-bootstrap.html');
+      await page.goto('https://localhost:3000/dialog-demo-bootstrap-impl.html');
      await page.waitForTimeout(3000);
    }
  });

  afterAll(() => {
+    console.log('Closing process.');
    process.kill();
  });

@@ -25,6 +25,8 @@ envVars.NODE_ENV = process.env.NODE_ENV;
 envVars.PORT = PORT;

 const isProd = process.env.NODE_ENV === 'production';
+const isWebpackServe = process.env.WEBPACK_SERVE === 'true';
+
 const publicPath = process.env.ASSET_PATH || '/';

 /*********************************
@@ -387,10 +389,11 @@ module.exports = [
  // 2. Set up webpack dev server during development
  // Note: devServer settings are only read in the first element when module.exports is an array
  { ...copyFilesConfig, ...(isProd ? {} : { devServer }) },
-  // 3. Create the server bundle
-  serverConfig,
+  // 3. Create the server bundle. Don't serve server bundle when running webpack serve.
+  !isWebpackServe && serverConfig,
  // 4. Create one client bundle for each client entrypoint.
  ...clientConfigs,
-  // 5. Create a development dialog bundle for each client entrypoint during development.
-  ...(isProd ? [] : devClientConfigs),
-];
+  // 5. Create a development dialog wrapper bundle for each client entrypoint during development.
+  //    Don't actually serve it though when running webpack serve.
+  ...(isProd || isWebpackServe ? [] : devClientConfigs),
+].filter(Boolean);