perf(frontend): manual chunk js modules

GZTimeWalker · Dec 17, 2024 · beef3f4 · beef3f4
1 parent 3c778f9
commit beef3f4
Show file tree

Hide file tree

Showing 6 changed files with 276 additions and 242 deletions.
diff --git a/src/Directory.Packages.props b/src/Directory.Packages.props
@@ -32,7 +32,7 @@
     <PackageVersion Include="OpenTelemetry.Instrumentation.Process" Version="0.5.0-beta.7" />
     <PackageVersion Include="OpenTelemetry.Instrumentation.Runtime" Version="1.10.0" />
     <PackageVersion Include="OpenTelemetry.Instrumentation.StackExchangeRedis" Version="1.9.0-beta.1" />
-    <PackageVersion Include="Scalar.AspNetCore" Version="1.2.56" />
+    <PackageVersion Include="Scalar.AspNetCore" Version="1.2.61" />
     <PackageVersion Include="Serilog.AspNetCore" Version="9.0.0" />
     <PackageVersion Include="Serilog.Expressions" Version="5.0.0" />
     <PackageVersion Include="Serilog.Extensions.Logging" Version="9.0.0" />
@@ -55,10 +55,10 @@
     <PackageVersion Include="Microsoft.AspNetCore.TestHost" Version="9.0.0" />
     <PackageVersion Include="Microsoft.NET.Test.Sdk" Version="17.12.0" />
     <PackageVersion Include="xunit" Version="2.9.2" />
-    <PackageVersion Include="xunit.runner.visualstudio" Version="2.8.2" />
+    <PackageVersion Include="xunit.runner.visualstudio" Version="3.0.0"/>
     <PackageVersion Include="xunit.runner.console" Version="2.9.2" />
     <PackageVersion Include="coverlet.collector" Version="6.0.2" />
     <PackageVersion Include="coverlet.msbuild" Version="6.0.2" />
     <PackageVersion Include="ZstdSharp.Port" Version="0.8.4" />
   </ItemGroup>
-</Project>
+</Project>
diff --git a/src/GZCTF/ClientApp/package.json b/src/GZCTF/ClientApp/package.json
@@ -37,10 +37,10 @@
     "embla-carousel-autoplay": "^8.5.1",
     "embla-carousel-react": "^8.5.1",
     "fast-average-color": "^9.4.0",
-    "i18next": "^24.1.0",
+    "i18next": "^24.1.2",
     "i18next-browser-languagedetector": "^8.0.2",
     "i18next-resources-to-backend": "^1.2.1",
-    "katex": "^0.16.15",
+    "katex": "^0.16.17",
     "lz-string": "^1.5.0",
     "marked": "^15.0.4",
     "marked-highlight": "^2.2.1",
@@ -62,14 +62,14 @@
     "@eslint/js": "^9.17.0",
     "@nabla/vite-plugin-eslint": "^2.0.5",
     "@trivago/prettier-plugin-sort-imports": "^5.2.0",
-    "@types/chroma-js": "^2.4.4",
+    "@types/chroma-js": "^2.4.5",
     "@types/katex": "^0.16.7",
     "@types/node": "^22.10.2",
     "@types/prismjs": "^1.26.5",
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.2",
-    "@typescript-eslint/eslint-plugin": "^8.18.0",
-    "@typescript-eslint/parser": "^8.18.0",
+    "@typescript-eslint/eslint-plugin": "^8.18.1",
+    "@typescript-eslint/parser": "^8.18.1",
     "@vitejs/plugin-react": "^4.3.4",
     "axios": "^1.7.9",
     "babel-plugin-prismjs": "^2.1.0",
@@ -80,7 +80,7 @@
     "form-data": "~4.0.1",
     "globals": "^15.13.0",
     "lodash": "^4.17.21",
-    "oxlint": "^0.15.2",
+    "oxlint": "^0.15.3",
     "postcss": "^8.4.49",
     "postcss-preset-mantine": "^1.17.0",
     "postcss-simple-vars": "^7.0.1",

diff --git a/src/GZCTF/ClientApp/plugins/vite-i18n-virtual-manifest.ts b/src/GZCTF/ClientApp/plugins/vite-i18n-virtual-manifest.ts
@@ -72,7 +72,7 @@ export default function i18nVirtualManifest(): Plugin {
     },
 
     configureServer(server) {
-      // handle requests for i18n resources like `/static/${file}`
+      // handle requests for i18n resources like `/static/${lang}.${hash}.json`
       server.middlewares.use((req, res, next) => {
         if (!req.url?.startsWith('/static/')) {
           return next()
@@ -82,9 +82,7 @@ export default function i18nVirtualManifest(): Plugin {
         const content = contents[file]
 
         if (!content) {
-          res.statusCode = 404
-          res.end('File not found')
-          return
+          return next()
         }
 
         res.setHeader('Content-Type', 'application/json')

diff --git a/src/GZCTF/ClientApp/plugins/vite-manual-chunk.ts b/src/GZCTF/ClientApp/plugins/vite-manual-chunk.ts
@@ -0,0 +1,31 @@
+const allowList = ['mantine', 'prismjs', 'zrender', 'katex', 'pdfjs-dist', '/echarts@', '/react-dom@']
+
+const packDict: Record<string, string> = {
+  'src/components/admin': 'admin',
+  'src/components': 'user',
+  'src/pages/admin': 'admin',
+  'src/pages': 'pages',
+  use: 'hooks',
+  // for __vite-browser-external
+  browser: 'user',
+}
+
+export default function manualChunks(id: string): string | undefined {
+  // pack all packDict to its own chunk
+  for (const [key, value] of Object.entries(packDict)) {
+    if (id.includes(key)) {
+      return value
+    }
+  }
+  // pack all node_modules/* into its own chunk
+  if (id.includes('node_modules')) {
+    for (const name of allowList) {
+      if (id.includes(name)) {
+        const match = id.match(/\.pnpm\/([^@]+)/)
+        if (match) {
+          return `vendor-${match[1]}`
+        }
+      }
+    }
+  }
+}