diff --git a/frontend/package-lock.json b/frontend/package-lock.json index d898aaa7d..47f7ed2ca 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -71,6 +71,7 @@ "undici": "^6.19.2", "util": "^0.12.5", "webpack": "^5.92.1", + "webpack-bundle-analyzer": "^4.10.2", "webpack-cli": "^5.1.4", "webpack-dev-server": "^5.0.4" } @@ -4331,6 +4332,12 @@ "node": ">=18" } }, + "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 + }, "node_modules/@remix-run/router": { "version": "1.19.1", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.1.tgz", @@ -9397,6 +9404,12 @@ "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 + }, "node_modules/debug": { "version": "4.3.6", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz", @@ -9817,6 +9830,12 @@ "webpack": "^4 || ^5" } }, + "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 + }, "node_modules/eastasianwidth": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", @@ -12010,6 +12029,21 @@ "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0" } }, + "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, + "dependencies": { + "duplexer": "^0.1.2" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/handle-thing": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz", @@ -15943,6 +15977,15 @@ "node": ">=0.4.0" } }, + "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, + "engines": { + "node": ">=10" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -16619,6 +16662,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "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, + "bin": { + "opener": "bin/opener-bin.js" + } + }, "node_modules/optionator": { "version": "0.9.4", "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz", @@ -18566,6 +18618,20 @@ "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==", "dev": true }, + "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, + "dependencies": { + "@polka/url": "^1.0.0-next.24", + "mrmime": "^2.0.0", + "totalist": "^3.0.0" + }, + "engines": { + "node": ">= 10" + } + }, "node_modules/sisteransi": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz", @@ -20025,6 +20091,15 @@ "node": ">=0.6" } }, + "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, + "engines": { + "node": ">=6" + } + }, "node_modules/tough-cookie": { "version": "4.1.4", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz", @@ -20976,6 +21051,86 @@ } } }, + "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, + "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/acorn": { + "version": "8.12.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz", + "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==", + "dev": true, + "bin": { + "acorn": "bin/acorn" + }, + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/webpack-bundle-analyzer/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, + "dependencies": { + "acorn": "^8.11.0" + }, + "engines": { + "node": ">=0.4.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, + "engines": { + "node": ">= 10" + } + }, + "node_modules/webpack-bundle-analyzer/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, + "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/webpack-cli": { "version": "5.1.4", "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.4.tgz", diff --git a/frontend/package.json b/frontend/package.json index 7ea3db807..1f1f8c971 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -10,12 +10,16 @@ "dev": "webpack-dev-server --config webpack.dev.js --open", "tsc": "tsc --noEmit", "build": "webpack --mode production --config webpack.prod.js", + "build:report": "webpack-bundle-analyzer --port 8888 dist/bundle-stats.json", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build", "lint:style": "stylelint '**/style.ts' --fix" }, "keywords": [], "author": "", + "sideEffects": [ + "./src/routes/router.tsx" + ], "license": "ISC", "dependencies": { "@emotion/react": "^11.11.4", @@ -80,6 +84,7 @@ "undici": "^6.19.2", "util": "^0.12.5", "webpack": "^5.92.1", + "webpack-bundle-analyzer": "^4.10.2", "webpack-cli": "^5.1.4", "webpack-dev-server": "^5.0.4" }, diff --git a/frontend/src/components/Toast/Toast.tsx b/frontend/src/components/Toast/Toast.tsx index 073506517..ec72a6270 100644 --- a/frontend/src/components/Toast/Toast.tsx +++ b/frontend/src/components/Toast/Toast.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import { useState, useEffect } from 'react'; import * as S from './Toast.style'; diff --git a/frontend/src/routes/router.tsx b/frontend/src/routes/router.tsx index 1d02833c5..ca7de82dc 100644 --- a/frontend/src/routes/router.tsx +++ b/frontend/src/routes/router.tsx @@ -1,30 +1,45 @@ import { ErrorBoundary } from '@sentry/react'; -import { Suspense } from 'react'; +import { lazy, Suspense } from 'react'; import { createBrowserRouter } from 'react-router-dom'; import { Layout, LoadingFallback } from '@/components'; -import { - TemplatePage, - TemplateUploadPage, - SignupPage, - LoginPage, - LandingPage, - NotFoundPage, - TemplateExplorePage, - MyTemplatePage, -} from '@/pages'; import RouteGuard from './RouteGuard'; import { END_POINTS } from './endPoints'; +const LandingPage = lazy(() => import('@/pages/LandingPage/LandingPage')); +const TemplatePage = lazy(() => import('@/pages/TemplatePage/TemplatePage')); +const TemplateUploadPage = lazy(() => import('@/pages/TemplateUploadPage/TemplateUploadPage')); +const SignupPage = lazy(() => import('@/pages/SignupPage/SignupPage')); +const LoginPage = lazy(() => import('@/pages/LoginPage/LoginPage')); +const NotFoundPage = lazy(() => import('@/pages/NotFoundPage/NotFoundPage')); +const TemplateExplorePage = lazy(() => import('@/pages/TemplateExplorePage/TemplateExplorePage')); +const MyTemplatePage = lazy(() => import('@/pages/MyTemplatesPage/MyTemplatePage')); + +const CustomSuspense = ({ children }: { children: JSX.Element }) => ( + Loading...}>{children} +); + const router = createBrowserRouter([ { - errorElement: , - element: , + errorElement: ( + + + + ), + element: ( + + + + ), children: [ { path: END_POINTS.HOME, - element: , + element: ( + + + + ), }, { path: END_POINTS.MY_TEMPLATES, @@ -40,17 +55,27 @@ const router = createBrowserRouter([ }, { path: END_POINTS.TEMPLATES_EXPLORE, - element: , + element: ( + + + + ), }, { path: END_POINTS.TEMPLATE, - element: , + element: ( + + + + ), }, { path: END_POINTS.TEMPLATES_UPLOAD, element: ( - + + + ), }, @@ -58,7 +83,9 @@ const router = createBrowserRouter([ path: END_POINTS.SIGNUP, element: ( - + + + ), }, @@ -66,13 +93,19 @@ const router = createBrowserRouter([ path: END_POINTS.LOGIN, element: ( - + + + ), }, { path: '*', - element: , + element: ( + + + + ), }, ], }, diff --git a/frontend/webpack.common.js b/frontend/webpack.common.js index 01923dd9f..6f4429637 100644 --- a/frontend/webpack.common.js +++ b/frontend/webpack.common.js @@ -84,5 +84,4 @@ module.exports = { }, extensions: ['.tsx', '.ts', '.js'], }, - devtool: 'source-map', }; diff --git a/frontend/webpack.prod.js b/frontend/webpack.prod.js index a62146e97..f56735d20 100644 --- a/frontend/webpack.prod.js +++ b/frontend/webpack.prod.js @@ -1,6 +1,5 @@ const { merge } = require('webpack-merge'); const Dotenv = require('dotenv-webpack'); - const common = require('./webpack.common.js'); module.exports = () => { @@ -15,5 +14,10 @@ module.exports = () => { ignoreStub: true, }), ], + optimization: { + splitChunks: { + chunks: 'all', + }, + }, }); };