Merge pull request #65 from oasisprotocol/ml/split-chunks

Split build bundle

.gitignore

@@ -26,3 +26,6 @@ dist-ssr
 
 # eslint
 /.eslintcache
+
+# vite-bundle-visualizer output
+/frontend/stats.html

backend/package.json

@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "@openzeppelin/contracts": "^4.9.5",
-    "ethers": "^6.11.1"
+    "ethers": "6.10.0"
   },
   "devDependencies": {
     "@nomicfoundation/hardhat-ethers": "^3.0.5",

frontend/package.json

@@ -8,7 +8,8 @@
     "checkTs": "tsc --noEmit",
     "dev": "vite",
     "build": "tsc && node ./internals/scripts/build.mjs",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "visualize:bundle": "npx vite-bundle-visualizer"
   },
   "packageManager": "[email protected]",
   "engines": {
@@ -22,7 +23,7 @@
     "@oasisprotocol/dapp-voting-backend": "workspace:^",
     "@oasisprotocol/sapphire-paratime": "^1.3.2",
     "@phosphor-icons/core": "^2.0.8",
-    "ethers": "^6.11.1",
+    "ethers": "6.10.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intersection-observer": "^9.8.1",
@@ -35,6 +36,7 @@
     "@types/react": "^18.2.56",
     "@types/react-dom": "^18.2.19",
     "@vitejs/plugin-react-swc": "^3.5.0",
+    "rollup-plugin-visualizer": "^5.12.0",
     "typescript": "^5.2.2",
     "vite": "^5.1.4",
     "vite-plugin-svgr": "^4.2.0"

frontend/vite.config.ts

@@ -1,8 +1,30 @@
-import { defineConfig } from 'vite'
+import { defineConfig, PluginOption, splitVendorChunkPlugin } from 'vite'
 import svgr from 'vite-plugin-svgr'
 import react from '@vitejs/plugin-react-swc'
+import { visualizer } from 'rollup-plugin-visualizer'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [svgr(), react()],
+  plugins: [svgr(), react(), splitVendorChunkPlugin(), visualizer() as PluginOption],
+  build: {
+    sourcemap: true,
+    rollupOptions: {
+      output: {
+        manualChunks(id: string) {
+          if (id.includes('ethers')) {
+            return 'ethers'
+          }
+          if (id.includes('recharts')) {
+            return 'recharts'
+          }
+          if (id.includes('lodash')) {
+            return 'lodash'
+          }
+          if (id.includes('react-dom')) {
+            return 'react-dom'
+          }
+        },
+      },
+    },
+  },
 })