From 3e75cef6673bac7c62472e547a291b1a452415ed Mon Sep 17 00:00:00 2001 From: parsa aghaei Date: Mon, 30 Sep 2024 12:15:43 +0330 Subject: [PATCH] webpack optimized --- next.config.mjs | 32 +++++- package-lock.json | 253 +++++++++++++++++++++++++++++++++++++++++++- package.json | 8 +- src/app/globals.css | 36 +++---- 4 files changed, 306 insertions(+), 23 deletions(-) diff --git a/next.config.mjs b/next.config.mjs index c58c974..fdf3249 100644 --- 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, + 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; diff --git a/package-lock.json b/package-lock.json index d235dc3..0d1d4be 100644 --- 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", diff --git a/package.json b/package.json index c1218dd..7ec872a 100644 --- 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" } } diff --git a/src/app/globals.css b/src/app/globals.css index 1a36b35..08e331f 100644 --- 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%; }