speed up development env with swc-loader and hmr (#3458)

opendatahub-io · Nov 12, 2024 · 6f439e5 · 6f439e5
1 parent 4066b69
commit 6f439e5
Show file tree

Hide file tree

Showing 5 changed files with 1,261 additions and 335 deletions.
diff --git a/frontend/config/webpack.common.js b/frontend/config/webpack.common.js
@@ -3,6 +3,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
 const { setupWebpackDotenvFilesForEnv } = require('./dotenv');
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
 const RELATIVE_DIRNAME = process.env._ODH_RELATIVE_DIRNAME;
 const IS_PROJECT_ROOT_DIR = process.env._ODH_IS_PROJECT_ROOT_DIR;
@@ -34,16 +35,18 @@ module.exports = (env) => {
       rules: [
         {
           test: /\.(tsx|ts|jsx|js)?$/,
+          exclude: [/node_modules/, /__tests__/, /__mocks__/],
           include: [SRC_DIR, COMMON_DIR],
           use: [
             COVERAGE === 'true' && '@jsdevtools/coverage-istanbul-loader',
-            {
-              loader: 'ts-loader',
-              options: {
-                transpileOnly: env !== 'development',
-                experimentalWatchApi: true,
-              },
-            },
+            env === 'development'
+              ? { loader: 'swc-loader' }
+              : {
+                  loader: 'ts-loader',
+                  options: {
+                    transpileOnly: true,
+                  },
+                },
           ],
         },
         {
@@ -176,6 +179,7 @@ module.exports = (env) => {
       publicPath: PUBLIC_PATH,
     },
     plugins: [
+      new ForkTsCheckerWebpackPlugin(),
       ...setupWebpackDotenvFilesForEnv({
         directory: RELATIVE_DIRNAME,
         isRoot: IS_PROJECT_ROOT_DIR,

diff --git a/frontend/config/webpack.dev.js b/frontend/config/webpack.dev.js
@@ -2,6 +2,10 @@ const { execSync } = require('child_process');
 const path = require('path');
 const { merge } = require('webpack-merge');
 const { setupWebpackDotenvFilesForEnv, setupDotenvFilesForEnv } = require('./dotenv');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
+
+const smp = new SpeedMeasurePlugin({ disable: !process.env.MEASURE });
 
 setupDotenvFilesForEnv({ env: 'development' });
 const webpackCommon = require('./webpack.common.js');
@@ -15,120 +19,134 @@ const HOST = process.env._ODH_HOST;
 const PORT = process.env._ODH_PORT;
 const BACKEND_PORT = process.env._BACKEND_PORT;
 
-module.exports = merge(
-  {
-    plugins: [
-      ...setupWebpackDotenvFilesForEnv({
-        directory: RELATIVE_DIRNAME,
-        env: 'development',
-        isRoot: IS_PROJECT_ROOT_DIR,
-      }),
-    ],
-  },
-  webpackCommon('development'),
-  {
-    mode: 'development',
-    devtool: 'eval-source-map',
-    devServer: {
-      host: HOST,
-      port: PORT,
-      compress: true,
-      historyApiFallback: true,
-      hot: true,
-      open: false,
-      proxy: (() => {
-        if (process.env.EXT_CLUSTER) {
-          const odhProject = process.env.OC_PROJECT || 'opendatahub';
-          const app = process.env.ODH_APP || 'odh-dashboard';
-          console.info('Using project:', odhProject);
+module.exports = smp.wrap(
+  merge(
+    {
+      plugins: [
+        ...setupWebpackDotenvFilesForEnv({
+          directory: RELATIVE_DIRNAME,
+          env: 'development',
+          isRoot: IS_PROJECT_ROOT_DIR,
+        }),
+      ],
+    },
+    webpackCommon('development'),
+    {
+      mode: 'development',
+      devtool: 'eval-source-map',
+      optimization: {
+        runtimeChunk: 'single',
+        removeEmptyChunks: true,
+      },
+      devServer: {
+        host: HOST,
+        port: PORT,
+        compress: true,
+        historyApiFallback: true,
+        hot: true,
+        open: false,
+        proxy: (() => {
+          if (process.env.EXT_CLUSTER) {
+            const odhProject = process.env.OC_PROJECT || 'opendatahub';
+            const app = process.env.ODH_APP || 'odh-dashboard';
+            console.info('Using project:', odhProject);
 
-          let dashboardHost;
-          let token;
-          try {
+            let dashboardHost;
+            let token;
             try {
-              dashboardHost = execSync(
-                `oc get routes -n ${odhProject} ${app} -o jsonpath='{.spec.host}'`,
-              )
-                .toString()
-                .trim();
+              try {
+                dashboardHost = execSync(
+                  `oc get routes -n ${odhProject} ${app} -o jsonpath='{.spec.host}'`,
+                )
+                  .toString()
+                  .trim();
+              } catch (e) {
+                console.info('Failed to GET dashboard route, constructing host manually.');
+                dashboardHost = new URL(
+                  execSync(`oc whoami --show-console`).toString(),
+                ).host.replace(/^[^.]+\./, `${app}-${odhProject}.`);
+              }
+              console.info('Dashboard host:', dashboardHost);
+
+              token = execSync('oc whoami --show-token').toString().trim();
+
+              const username = execSync('oc whoami').toString().trim();
+              console.info('Logged in as user:', username);
             } catch (e) {
-              console.info('Failed to GET dashboard route, constructing host manually.');
-              dashboardHost = new URL(execSync(`oc whoami --show-console`).toString()).host
-                .replace(/^[^.]+\./, `${app}-${odhProject}.`);
+              console.error('Login with `oc login` prior to starting dev server.');
+              process.exit(1);
             }
-            console.info('Dashboard host:', dashboardHost);
 
-            token = execSync('oc whoami --show-token').toString().trim();
+            const headers = {
+              Authorization: `Bearer ${token}`,
+              'x-forwarded-access-token': token,
+            };
 
-            const username = execSync('oc whoami').toString().trim();
-            console.info('Logged in as user:', username);
-          } catch (e) {
-            console.error('Login with `oc login` prior to starting dev server.');
-            process.exit(1);
+            return [
+              {
+                context: ['/api'],
+                target: `https://${dashboardHost}`,
+                secure: false,
+                changeOrigin: true,
+                headers,
+              },
+              {
+                context: ['/wss'],
+                target: `wss://${dashboardHost}`,
+                ws: true,
+                secure: false,
+                changeOrigin: true,
+                headers,
+              },
+            ];
+          } else {
+            return [
+              {
+                context: ['/api'],
+                target: `http://0.0.0.0:${BACKEND_PORT}`,
+              },
+              {
+                context: ['/wss'],
+                target: `ws://0.0.0.0:${BACKEND_PORT}`,
+                ws: true,
+              },
+            ];
           }
-
-          const headers = {
-            Authorization: `Bearer ${token}`,
-            'x-forwarded-access-token': token,
-          };
-
-          return {
-            '/api': {
-              target: `https://${dashboardHost}`,
-              secure: false,
-              changeOrigin: true,
-              headers,
-            },
-            '/wss': {
-              target: `wss://${dashboardHost}`,
-              ws: true,
-              secure: false,
-              changeOrigin: true,
-              headers,
-            },
-          };
-        } else {
-          return {
-            '/api': `http://0.0.0.0:${BACKEND_PORT}`,
-            '/wss': {
-              target: `ws://0.0.0.0:${BACKEND_PORT}`,
-              ws: true,
-            },
-          };
-        }
-      })(),
-      devMiddleware: {
-        stats: 'errors-only',
-      },
-      client: {
-        overlay: false,
-      },
-      static: {
-        directory: DIST_DIR,
+        })(),
+        devMiddleware: {
+          stats: 'errors-only',
+        },
+        client: {
+          overlay: false,
+        },
+        static: {
+          directory: DIST_DIR,
+        },
+        onListening: (devServer) => {
+          if (devServer) {
+            console.log(
+              `\x1b[32m✓ ODH Dashboard available at: \x1b[4mhttp://localhost:${
+                devServer.server.address().port
+              }\x1b[0m`,
+            );
+          }
+        },
       },
-      onListening: (devServer) => {
-        if (devServer) {
-          console.log(
-            `\x1b[32m✓ ODH Dashboard available at: \x1b[4mhttp://localhost:${
-              devServer.server.address().port
-            }\x1b[0m`,
-          );
-        }
+      module: {
+        rules: [
+          {
+            test: /\.css$/,
+            include: [
+              SRC_DIR,
+              COMMON_DIR,
+              path.resolve(RELATIVE_DIRNAME, 'node_modules/@patternfly'),
+              path.resolve(RELATIVE_DIRNAME, 'node_modules/monaco-editor'),
+            ],
+            use: ['style-loader', 'css-loader'],
+          },
+        ],
       },
+      plugins: [new ReactRefreshWebpackPlugin({ overlay: false })],
     },
-    module: {
-      rules: [
-        {
-          test: /\.css$/,
-          include: [
-            SRC_DIR,
-            COMMON_DIR,
-            path.resolve(RELATIVE_DIRNAME, 'node_modules/@patternfly'),
-            path.resolve(RELATIVE_DIRNAME, 'node_modules/monaco-editor'),
-          ],
-          use: ['style-loader', 'css-loader'],
-        },
-      ],
-    },
-  },
+  ),
 );