chore: adjust webpack output (#11573)

- automatically split i18n resources into i18n-langs.{lang} naming
- force worker resources to be bundled in one file

packages/frontend/i18n/src/resources/index.ts

@@ -45,122 +45,120 @@ export const SUPPORTED_LANGUAGES: Record<
     name: 'Korean (South Korea)',
     originalName: '한국어(대한민국)',
     flagEmoji: '🇰🇷',
-    resource: () => /* webpackChunkName "i18n-ko" */ import('./ko.json'),
+    resource: () => import('./ko.json'),
   },
   'pt-BR': {
     name: 'Portuguese (Brazil)',
     originalName: 'português (Brasil)',
     flagEmoji: '🇧🇷',
-    resource: () => /* webpackChunkName "i18n-pt_BR" */ import('./pt-BR.json'),
+    resource: () => import('./pt-BR.json'),
   },
   'zh-Hans': {
     name: 'Simplified Chinese',
     originalName: '简体中文',
     flagEmoji: '🇨🇳',
-    resource: () =>
+    resource: () => import('./zh-Hans.json'),
-      /* webpackChunkName "i18n-zh_Hans" */ import('./zh-Hans.json'),
   },
   'zh-Hant': {
     name: 'Traditional Chinese',
     originalName: '繁體中文',
     flagEmoji: '🇭🇰',
-    resource: () =>
+    resource: () => import('./zh-Hant.json'),
-      /* webpackChunkName "i18n-zh_Hant" */ import('./zh-Hant.json'),
   },
   fr: {
     name: 'French',
     originalName: 'français',
     flagEmoji: '🇫🇷',
-    resource: () => /* webpackChunkName "i18n-fr" */ import('./fr.json'),
+    resource: () => import('./fr.json'),
   },
   es: {
     name: 'Spanish',
     originalName: 'español',
     flagEmoji: '🇪🇸',
-    resource: () => /* webpackChunkName "i18n-es" */ import('./es.json'),
+    resource: () => import('./es.json'),
   },
   'es-AR': {
     name: 'Spanish (Argentina)',
     originalName: 'español (Argentina)',
     flagEmoji: '🇦🇷',
-    resource: () => /* webpackChunkName "i18n-es_AR" */ import('./es-AR.json'),
+    resource: () => import('./es-AR.json'),
   },
   'es-CL': {
     name: 'Spanish (Chile)',
     originalName: 'español (Chile)',
     flagEmoji: '🇨🇱',
-    resource: () => /* webpackChunkName "i18n-es_CL" */ import('./es-CL.json'),
+    resource: () => import('./es-CL.json'),
   },
   de: {
     name: 'German',
     originalName: 'Deutsch',
     flagEmoji: '🇩🇪',
-    resource: () => /* webpackChunkName "i18n-de" */ import('./de.json'),
+    resource: () => import('./de.json'),
   },
   ru: {
     name: 'Russian',
     originalName: 'русский',
     flagEmoji: '🇷🇺',
-    resource: () => /* webpackChunkName "i18n-ru" */ import('./ru.json'),
+    resource: () => import('./ru.json'),
   },
   ja: {
     name: 'Japanese',
     originalName: '日本語',
     flagEmoji: '🇯🇵',
-    resource: () => /* webpackChunkName "i18n-ja" */ import('./ja.json'),
+    resource: () => import('./ja.json'),
   },
   it: {
     name: 'Italian',
     originalName: 'italiano',
     flagEmoji: '🇮🇹',
-    resource: () => /* webpackChunkName "i18n-it" */ import('./it.json'),
+    resource: () => import('./it.json'),
   },
   ca: {
     name: 'Catalan',
     originalName: 'català',
     flagEmoji: '🇦🇩',
-    resource: () => /* webpackChunkName "i18n-ca" */ import('./ca.json'),
+    resource: () => import('./ca.json'),
   },
   da: {
     name: 'Danish',
     originalName: 'dansk',
     flagEmoji: '🇩🇰',
-    resource: () => /* webpackChunkName "i18n-da" */ import('./da.json'),
+    resource: () => import('./da.json'),
   },
   hi: {
     name: 'Hindi',
     originalName: 'हिन्दी',
     flagEmoji: '🇮🇳',
-    resource: () => /* webpackChunkName "i18n-hi" */ import('./hi.json'),
+    resource: () => import('./hi.json'),
   },
   'sv-SE': {
     name: 'Swedish (Sweden)',
     originalName: 'svenska (Sverige)',
     flagEmoji: '🇸🇪',
-    resource: () => /* webpackChunkName "i18n-sv_SE" */ import('./sv-SE.json'),
+    resource: () => import('./sv-SE.json'),
   },
   ur: {
     name: 'Urdu',
     originalName: 'اردو',
     flagEmoji: '🇵🇰',
-    resource: () => /* webpackChunkName "i18n-ur" */ import('./ur.json'),
+    resource: () => import('./ur.json'),
   },
   ar: {
     name: 'Arabic',
     originalName: 'العربية',
     flagEmoji: '🇸🇦',
-    resource: () => /* webpackChunkName "i18n-ar" */ import('./ar.json'),
+    resource: () => import('./ar.json'),
   },
   fa: {
     name: 'Persian',
     originalName: 'فارسی',
     flagEmoji: '🇮🇷',
-    resource: () => /* webpackChunkName "i18n-ar" */ import('./fa.json'),
+    resource: () => import('./fa.json'),
   },
   uk: {
     name: 'Ukrainian',
     originalName: 'українська',
     flagEmoji: '🇺🇦',
-    resource: () => /* webpackChunkName "i18n-uk" */ import('./uk.json'),
+    resource: () => import('./uk.json'),
   },
 };

tools/cli/src/webpack/cache-group.ts

@@ -5,6 +5,19 @@ function testPackageName(regexp: RegExp): (module: any) => boolean {
 
 // https://hackernoon.com/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758
 export const productionCacheGroups = {
+  i18n: {
+    test: /frontend[\\/]i18n[\\/]/,
+    name: (module: any) => {
+      const name = module.resource.match(/[\\/]([^\\/]+)\.json$/)?.[1];
+      if (name && name !== 'en') {
+        return `i18n-langs.${name}`;
+      }
+
+      return 'i18n';
+    },
+    priority: 200,
+    enforce: true,
+  },
   asyncVendor: {
     test: /[\\/]node_modules[\\/]/,
     name(module: any) {

tools/cli/src/webpack/index.ts

@@ -414,7 +414,7 @@ export function createWorkerTargetConfig(
 
   return {
     name: entry,
-    context: pkg.path.value,
+    context: ProjectRoot.value,
     experiments: {
       topLevelAwait: true,
       outputModule: false,
@@ -541,6 +541,9 @@ export function createWorkerTargetConfig(
           {} as Record<string, string>
         )
       ),
+      new webpack.optimize.LimitChunkCountPlugin({
+        maxChunks: 1,
+      }),
       process.env.SENTRY_AUTH_TOKEN &&
         process.env.SENTRY_ORG &&
         process.env.SENTRY_PROJECT &&