build: optimize bundle size by updating split strategy

.github/workflows/size-limit.yml

@@ -3,10 +3,6 @@ on:
   pull_request:
     branches:
       - master
-
-permissions:
-  pull-requests: read
-
 jobs:
   size:
     runs-on: ubuntu-latest

src/components/canvases/StaticCanvas.tsx

@@ -37,25 +37,10 @@ const StaticCanvas = (props: StaticCanvasProps) => {
       canvas.classList.add("excalidraw__canvas", "static");
     }
 
-    const widthString = `${props.appState.width}px`;
+    canvas.style.width = `${props.appState.width}px`;
-    const heightString = `${props.appState.height}px`;
+    canvas.style.height = `${props.appState.height}px`;
-    if (canvas.style.width !== widthString) {
+    canvas.width = props.appState.width * props.scale;
-      canvas.style.width = widthString;
+    canvas.height = props.appState.height * props.scale;
-    }
-    if (canvas.style.height !== heightString) {
-      canvas.style.height = heightString;
-    }
-
-    const scaledWidth = props.appState.width * props.scale;
-    const scaledHeight = props.appState.height * props.scale;
-    // setting width/height resets the canvas even if dimensions not changed,
-    // which would cause flicker when we skip frame (due to throttling)
-    if (canvas.width !== scaledWidth) {
-      canvas.width = scaledWidth;
-    }
-    if (canvas.height !== scaledHeight) {
-      canvas.height = scaledHeight;
-    }
 
     renderStaticScene(
       {

src/packages/excalidraw/webpack.prod.config.js

@@ -89,11 +89,19 @@ module.exports = {
       }),
     ],
     splitChunks: {
-      chunks: "async",
+      chunks: "all",
       cacheGroups: {
         vendors: {
           test: /[\\/]node_modules[\\/]/,
-          name: "vendor",
+          // cacheGroupKey here is `commons` as the key of the cacheGroup
+          name(module, chunks, cacheGroupKey) {
+            const moduleFileName = module
+              .identifier()
+              .split("/")
+              .reduceRight((item) => item);
+            const allChunksNames = chunks.map((item) => item.name).join("~");
+            return `${cacheGroupKey}-${allChunksNames}-${moduleFileName}`;
+          },
         },
       },
     },