webpack optimized

2024-09-30 12:15:43 +03:30 · 2024-09-30 12:15:43 +03:30 · 3e75cef667
commit 3e75cef667
parent b2d764aa15
4 changed files with 306 additions and 23 deletions
--- a/next.config.mjs
+++ b/next.config.mjs
@ -1,6 +1,34 @@
+
+import withBundleAnalyzer from '@next/bundle-analyzer';
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
  reactStrictMode: false,
+  // سایر تنظیمات Next.js شما
+  webpack(config, { isServer }) {
+    if (!isServer) {
+      config.optimization.splitChunks = {
+        chunks: 'all',
+        minSize: 30000,
+        maxAsyncRequests: 30,
+        maxInitialRequests: 30,
+        automaticNameDelimiter: '-',
+        cacheGroups: {
+          vendor: {
+            test: /[\\/]node_modules[\\/]/,
+            name: 'vendors',
+            chunks: 'all',
+          },
+        },
+      };
+    }
+    return config;
+  },
 };

-export default nextConfig;
+const withBundle = withBundleAnalyzer({
+  enabled: process.env.ANALYZE === 'true',
+  // می‌توانید تنظیمات اضافی پلاگین را اینجا اضافه کنید
+})(nextConfig);
+
+export default withBundle;
--- a/package-lock.json
+++ b/package-lock.json
@ -15,15 +15,18 @@
        "tailwindcss": "^0.0.0-insiders.e8614a2"
      },
      "devDependencies": {
+        "@next/bundle-analyzer": "^14.2.13",
        "@types/node": "^20",
        "@types/react": "^18",
        "@types/react-dom": "^18",
+        "cross-env": "^7.0.3",
        "eslint": "^8",
        "eslint-config-next": "14.2.11",
        "postcss": "^8",
        "prettier": "^3.3.3",
        "prettier-plugin-tailwindcss": "^0.6.6",
-        "typescript": "^5"
+        "typescript": "^5",
+        "webpack-bundle-analyzer": "^4.10.2"
      }
    },
    "node_modules/@alloc/quick-lru": {
@ -38,6 +41,16 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/@discoveryjs/json-ext": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
+      "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
    "node_modules/@eslint-community/eslint-utils": {
      "version": "4.4.0",
      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@ -228,6 +241,54 @@
        "@jridgewell/sourcemap-codec": "^1.4.14"
      }
    },
+    "node_modules/@next/bundle-analyzer": {
+      "version": "14.2.13",
+      "resolved": "https://registry.npmjs.org/@next/bundle-analyzer/-/bundle-analyzer-14.2.13.tgz",
+      "integrity": "sha512-CQOVKmfenD9HsG4AmyXG2ElMvtGKAT9TlS2JLgpL/EORi4WX+QMiQ8Ri6b+A7HRT+AiUGjsYnocIOET59i6Jfw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "webpack-bundle-analyzer": "4.10.1"
+      }
+    },
+    "node_modules/@next/bundle-analyzer/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/bundle-analyzer/node_modules/webpack-bundle-analyzer": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.10.1.tgz",
+      "integrity": "sha512-s3P7pgexgT/HTUSYgxJyn28A+99mmLq4HsJepMPzu0R8ImJc52QNqaFYW1Z2z2uIb1/J3eYgaAWVpaC+v/1aAQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@discoveryjs/json-ext": "0.5.7",
+        "acorn": "^8.0.4",
+        "acorn-walk": "^8.0.0",
+        "commander": "^7.2.0",
+        "debounce": "^1.2.1",
+        "escape-string-regexp": "^4.0.0",
+        "gzip-size": "^6.0.0",
+        "html-escaper": "^2.0.2",
+        "is-plain-object": "^5.0.0",
+        "opener": "^1.5.2",
+        "picocolors": "^1.0.0",
+        "sirv": "^2.0.3",
+        "ws": "^7.3.1"
+      },
+      "bin": {
+        "webpack-bundle-analyzer": "lib/bin/analyzer.js"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
    "node_modules/@next/env": {
      "version": "14.2.11",
      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.11.tgz",
@ -443,6 +504,13 @@
        "node": ">=14"
      }
    },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.28",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.28.tgz",
+      "integrity": "sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/@rtsao/scc": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@ -786,6 +854,19 @@
        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
      }
    },
+    "node_modules/acorn-walk": {
+      "version": "8.3.4",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
+      "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.11.0"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
    "node_modules/ajv": {
      "version": "6.12.6",
      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@ -1284,6 +1365,25 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/cross-env": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
+      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cross-spawn": "^7.0.1"
+      },
+      "bin": {
+        "cross-env": "src/bin/cross-env.js",
+        "cross-env-shell": "src/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=10.14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
    "node_modules/cross-spawn": {
      "version": "7.0.3",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@ -1378,6 +1478,13 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/debounce": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/debug": {
      "version": "4.3.7",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
@ -1510,6 +1617,13 @@
        "node": ">=6.0.0"
      }
    },
+    "node_modules/duplexer": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/eastasianwidth": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@ -2580,6 +2694,22 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/gzip-size": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
+      "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "duplexer": "^0.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/has-bigints": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
@ -2667,6 +2797,13 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/html-escaper": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
+      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/ignore": {
      "version": "5.3.2",
      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@ -3020,6 +3157,16 @@
        "node": ">=8"
      }
    },
+    "node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/is-regex": {
      "version": "1.1.4",
      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
@ -3434,6 +3581,16 @@
        "node": ">=16 || 14 >=14.17"
      }
    },
+    "node_modules/mrmime": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
+      "integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
    "node_modules/ms": {
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@ -3718,6 +3875,16 @@
        "wrappy": "1"
      }
    },
+    "node_modules/opener": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+      "dev": true,
+      "license": "(WTFPL OR MIT)",
+      "bin": {
+        "opener": "bin/opener-bin.js"
+      }
+    },
    "node_modules/optionator": {
      "version": "0.9.4",
      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@ -4547,6 +4714,21 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
+    "node_modules/sirv": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
+      "integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.24",
+        "mrmime": "^2.0.0",
+        "totalist": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
    "node_modules/slash": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@ -4958,6 +5140,16 @@
        "node": ">=8.0"
      }
    },
+    "node_modules/totalist": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/ts-api-utils": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
@ -5152,6 +5344,43 @@
      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
      "license": "MIT"
    },
+    "node_modules/webpack-bundle-analyzer": {
+      "version": "4.10.2",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.10.2.tgz",
+      "integrity": "sha512-vJptkMm9pk5si4Bv922ZbKLV8UTT4zib4FPgXMhgzUny0bfDDkLXAVQs3ly3fS4/TN9ROFtb0NFrm04UXFE/Vw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@discoveryjs/json-ext": "0.5.7",
+        "acorn": "^8.0.4",
+        "acorn-walk": "^8.0.0",
+        "commander": "^7.2.0",
+        "debounce": "^1.2.1",
+        "escape-string-regexp": "^4.0.0",
+        "gzip-size": "^6.0.0",
+        "html-escaper": "^2.0.2",
+        "opener": "^1.5.2",
+        "picocolors": "^1.0.0",
+        "sirv": "^2.0.3",
+        "ws": "^7.3.1"
+      },
+      "bin": {
+        "webpack-bundle-analyzer": "lib/bin/analyzer.js"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/webpack-bundle-analyzer/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
    "node_modules/which": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@ -5361,6 +5590,28 @@
      "dev": true,
      "license": "ISC"
    },
+    "node_modules/ws": {
+      "version": "7.5.10",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+      "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/yaml": {
      "version": "2.5.1",
      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.1.tgz",
--- a/package.json
+++ b/package.json
@ -7,7 +7,8 @@
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
-    "format": "prettier --write ."
+    "format": "prettier --write .",
+    "analyze": "cross-env ANALYZE=true next build"
  },
  "dependencies": {
    "next": "14.2.11",
@ -17,14 +18,17 @@
    "tailwindcss": "^0.0.0-insiders.e8614a2"
  },
  "devDependencies": {
+    "@next/bundle-analyzer": "^14.2.13",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
+    "cross-env": "^7.0.3",
    "eslint": "^8",
    "eslint-config-next": "14.2.11",
    "postcss": "^8",
    "prettier": "^3.3.3",
    "prettier-plugin-tailwindcss": "^0.6.6",
-    "typescript": "^5"
+    "typescript": "^5",
+    "webpack-bundle-analyzer": "^4.10.2"
  }
 }
--- a/src/app/globals.css
+++ b/src/app/globals.css
@ -23,7 +23,7 @@ html {
  background-color: var(--color-orange);
  width: 100%;
  scale: 0 1;
-  animation: scroll-watcher linear;
+  -webkit-animation: scroll-watcher linear;
  animation-timeline: scroll();
  transform-origin: left;
 }
@ -32,18 +32,18 @@ html {
 .project {
  scale: 0.5;
  opacity: 0.1;
-  animation: fade-in linear forwards;
+  -webkit-animation: fade-in linear forwards;
  animation-timeline: view();
  animation-range: 100px 400px;
 }

-@keyframes scroll-watcher {
+@-webkit-keyframes scroll-watcher {
  to {
    scale: 1 1;
  }
 }

-@keyframes fade-in {
+@-webkit-keyframes fade-in {
  to {
    scale: 1;
    opacity: 1;
@ -51,12 +51,12 @@ html {
 }

 .progress {
-  animation: progress linear forwards;
+  -webkit-animation: progress linear forwards;
  animation-timeline: view();
  animation-range: 25px 150px;
 }

-@keyframes progress {
+@-webkit-keyframes progress {
  from {
    width: 0px;
  }
@ -66,12 +66,12 @@ html {
  opacity: 0;
  scale: 0;
  z-index: 1000;
-  animation: back-to-top linear forwards;
+  -webkit-animation: back-to-top linear forwards;
  animation-timeline: scroll();
  animation-range: 400px 550px;
 }

-@keyframes back-to-top {
+@-webkit-keyframes back-to-top {
  to {
    opacity: 0.9;
    scale: 1;
@ -79,11 +79,11 @@ html {
 }

 /* #header {
-  animation: stick-to-top linear forwards;
+  -webkit-animation: stick-to-top linear forwards;
  animation-timeline: scroll();
  animation-range: 67px 100px;
 }
-@keyframes stick-to-top {
+@-webkit-keyframes stick-to-top {
  to {
    position: fixed;
    top: 0;
@ -106,7 +106,7 @@ html {
  border-top-left-radius: 269px;
  border-top-right-radius: 269px;
  z-index: 0;
-  animation: top-half 1.5s ease-out;
+  -webkit-animation: top-half 1.5s ease-out;
 } */

 /* .top-half-circle img {
@ -126,7 +126,7 @@ html {
  border-bottom-right-radius: 269px;
  overflow: hidden;
  z-index: 6;
-  animation: bottom-half 2s infinite linear;
+  -webkit-animation: bottom-half 2s infinite linear;
 } */

 /* .bottom-half-circle img {
@ -135,12 +135,12 @@ html {
  z-index: 0;
 } */

-@keyframes top-half {
+@-webkit-keyframes top-half {
  0% {
    bottom: -1000px;
  }
 }
-@keyframes bottom-half {
+@-webkit-keyframes bottom-half {
  0% {
    transform: rotate(-6deg);
  }
@ -161,7 +161,7 @@ html {
 .aboutme-image {
  position: relative;
  background: rgba(255, 255, 255, 0.6);
-  animation: 5s water linear infinite;
+  -webkit-animation: 5s water linear infinite;
 }

@property --angle {
@ -194,7 +194,7 @@ html {
  border-top-right-radius: 25%;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
-  animation: 3s spin linear infinite;
+  -webkit-animation: 3s spin linear infinite;
 }
 .aboutme-image::before {
  filter: blur(1.5rem);
@ -208,7 +208,7 @@ html {
  overflow: hidden;
 }

-@keyframes spin {
+@-webkit-keyframes spin {
  0% {
    --angle: 0deg;
    scale: 1;
@ -223,7 +223,7 @@ html {
  }
 }

-@keyframes water {
+@-webkit-keyframes water {
  0% {
    border-radius: 25% 46% 25% 25% / 25% 50% 25% 25%;
  }