feat: load datadog-chunk as separate script from main react app

opengovsg · May 2, 2024 · 9177241 · 9177241
1 parent 7db605c
commit 9177241
Show file tree

Hide file tree

Showing 7 changed files with 10 additions and 63 deletions.
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -28,5 +28,3 @@ build-storybook.log
 # Lint cache
 .eslintcache
 
-#Datadog chunk files
-datadog-chunk.*.js
diff --git a/frontend/.prettierignore b/frontend/.prettierignore
@@ -26,7 +26,6 @@ storybook-static
 build-storybook.log
 
 tsconfig.json
-tsconfig.dd.json
 
 # all asset json files
 **/assets/**/*.json

diff --git a/frontend/index.html b/frontend/index.html
@@ -46,6 +46,7 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-    <script type="module" src="/src/index.tsx"></script>
+    <script type="module" src="./src/index.tsx"></script>
+    <script type="module" src="./datadog-chunk.ts"></script>
   </body>
 </html>
diff --git a/frontend/package.json b/frontend/package.json
@@ -112,7 +112,6 @@
     "start": "vite",
     "build": "vite build",
     "serve": "vite preview",
-    "build:dd-chunk": "webpack --config webpack.dd.config.js",
     "test": "cross-env SKIP_PREFLIGHT_CHECK=true vitest",
     "eject": "react-scripts eject",
     "storybook": "NODE_OPTIONS=--openssl-legacy-provider storybook dev -p 6006",

diff --git a/frontend/tsconfig.dd.json b/frontend/tsconfig.dd.json
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
@@ -10,6 +10,14 @@ export default defineConfig(() => {
     build: {
       outDir: '../dist/frontend',
       emptyOutDir: true,
+      rollupOptions: {
+        output: {
+          // Manually chunk datadog-chunk.ts so it gets preloaded in index.html instead of app.
+          manualChunks: {
+            'datadog-chunk': ['datadog-chunk.ts'],
+          },
+        },
+      },
     },
     base: './',
     server: {

diff --git a/frontend/webpack.dd.config.js b/frontend/webpack.dd.config.js