Default chunk limit of 5, env variable to customize (#1209)

.changeset/fast-forks-juggle.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Limit number of chunks in webpack, customizable via env

core/next.config.js

@@ -18,7 +18,7 @@ const nextConfig = {
     ignoreDuringBuilds: !!process.env.CI,
     dirs: ['app', 'client', 'components', 'lib', 'middlewares'],
   },
-  webpack: (config) => {
+  webpack: (config, { isServer }) => {
     if (process.env.NODE_V8_COVERAGE) {
       Object.defineProperty(config, 'devtool', {
         get() {
@@ -28,6 +28,17 @@ const nextConfig = {
       });
     }
 
+    // Limit the number of chunks to reduce CDN requests, which contribute to Edge Request costs
+    if (!isServer) {
+      config.plugins.push(
+        new (require('webpack').optimize.LimitChunkCountPlugin)({
+          maxChunks: process.env.WEBPACK_MAX_CHUNKS
+            ? parseInt(process.env.WEBPACK_MAX_CHUNKS, 10)
+            : 5,
+        }),
+      );
+    }
+
     return config;
   },
   // default URL generation in BigCommerce uses trailing slash

core/package.json

@@ -54,6 +54,7 @@
     "sharp": "^0.33.4",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-radix": "^3.0.3",
+    "webpack": "^5.93.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {