perf: add webpack-retry-chunk-load-plugin to fix chunk load failed error

client/web/build/webpack.config.ts

@@ -17,6 +17,7 @@ import dayjs from 'dayjs';
 import { BundleStatsWebpackPlugin } from 'bundle-stats-webpack-plugin';
 import { WebpackStatsViewerPlugin } from 'webpack-stats-viewer-plugin';
 import { buildWorkboxPlugin } from './workbox';
+import { RetryChunkLoadPlugin } from 'webpack-retry-chunk-load-plugin';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 require('dotenv').config();
@@ -91,6 +92,9 @@ const plugins: Configuration['plugins'] = [
     ],
   }) as any,
   new MiniCssExtractPlugin({ filename: 'styles-[contenthash].css' }),
+  new RetryChunkLoadPlugin({
+    maxRetries: 2,
+  }),
   buildWorkboxPlugin(isDev),
   new WebpackBar({
     name: `Tailchat`,

client/web/package.json

@@ -141,6 +141,7 @@
     "webpack-bundle-analyzer": "^4.7.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.11.1",
+    "webpack-retry-chunk-load-plugin": "^3.1.1",
     "webpack-stats-viewer-plugin": "1.0.2",
     "webpackbar": "^5.0.2",
     "workbox-webpack-plugin": "^6.5.4"

pnpm-lock.yaml

@@ -429,6 +429,7 @@ importers:
       webpack-bundle-analyzer: ^4.7.0
       webpack-cli: ^4.10.0
       webpack-dev-server: ^4.11.1
+      webpack-retry-chunk-load-plugin: ^3.1.1
       webpack-stats-viewer-plugin: 1.0.2
       webpackbar: ^5.0.2
       workbox-webpack-plugin: ^6.5.4
@@ -550,6 +551,7 @@ importers:
       webpack-bundle-analyzer: 4.7.0
       webpack-cli: 4.10.0_y7ttplitmkohdpgkllksfboxwa
       webpack-dev-server: 4.11.1_pda42hcaj7d62cr262fr632kue
+      webpack-retry-chunk-load-plugin: 3.1.1_webpack@5.75.0
       webpack-stats-viewer-plugin: 1.0.2_webpack@5.75.0
       webpackbar: 5.0.2_webpack@5.75.0
       workbox-webpack-plugin: 6.5.4_webpack@5.75.0
@@ -13470,7 +13472,7 @@ packages:
       babel-plugin-syntax-jsx: 6.18.0
       lodash: 4.17.21
       picomatch: 2.3.1
-      styled-components: 5.3.6_react@18.2.0
+      styled-components: 5.3.6_7i5myeigehqah43i5u7wbekgba
 
   /babel-plugin-syntax-jsx/6.18.0:
     resolution: {integrity: sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==}
@@ -22124,7 +22126,7 @@ packages:
       pretty-format: 27.5.1
       slash: 3.0.0
       strip-json-comments: 3.1.1
-      ts-node: 10.9.1_k2dsl7zculo2nmh5s33pladmoa
+      ts-node: 10.9.1_nzafxra4mdyuer2ejmql6rdadq
     transitivePeerDependencies:
       - bufferutil
       - canvas
@@ -32588,7 +32590,6 @@ packages:
       react-is: 18.2.0
       shallowequal: 1.1.0
       supports-color: 5.5.0
-    dev: false
 
   /styled-components/5.3.6_mdz3marskokvq6744hhidi3r5a:
     resolution: {integrity: sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg==}
@@ -32634,6 +32635,7 @@ packages:
       react: 18.2.0
       shallowequal: 1.1.0
       supports-color: 5.5.0
+    dev: true
 
   /styled-system/5.1.5:
     resolution: {integrity: sha512-7VoD0o2R3RKzOzPK0jYrVnS8iJdfkKsQJNiLRDjikOpQVqQHns/DXWaPZOH4tIKkhAT7I6wIsy9FWTWh2X3q+A==}
@@ -35398,6 +35400,15 @@ packages:
       clone-deep: 4.0.1
       wildcard: 2.0.0
 
+  /webpack-retry-chunk-load-plugin/3.1.1_webpack@5.75.0:
+    resolution: {integrity: sha512-BKq/7EcelyWUUI6SeBaUKB1G+fSZP0rlxIwRQ+aO6mK5tffljaHdpJ4I2q54rpaaKjSbwbZRQlaITXe93SL9nA==}
+    peerDependencies:
+      webpack: '>=5.0.0'
+    dependencies:
+      prettier: 2.7.1
+      webpack: 5.75.0_webpack-cli@4.10.0
+    dev: true
+
   /webpack-sources/1.4.3:
     resolution: {integrity: sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==}
     dependencies: