diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js index ffe743f0..df6f2375 100644 --- a/frontend/.eslintrc.js +++ b/frontend/.eslintrc.js @@ -41,6 +41,8 @@ module.exports = { 'react/no-unused-prop-types': 'off', 'no-underscore-dangle': 'off', 'default-case': 'off', + 'import/no-extraneous-dependencies': 'off', + 'no-dupe-keys': 'off', }, settings: { 'import/resolver': { diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json index d64ca478..5577e5d1 100644 --- a/frontend/.vscode/settings.json +++ b/frontend/.vscode/settings.json @@ -11,8 +11,8 @@ } ], "editor.codeActionsOnSave": { - "source.fixAll.eslint": true, // eslint - "source.fixAll.stylelint": true // Stylelint + "source.fixAll.eslint": "explicit", + "source.fixAll.stylelint": "explicit" }, // formatter "editor.defaultFormatter": "esbenp.prettier-vscode", diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 304b3c44..230fea3f 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -50,6 +50,7 @@ "babel-plugin-styled-components": "^2.1.4", "browser-image-compression": "^2.0.2", "chromatic": "^6.19.9", + "compression-webpack-plugin": "^11.0.0", "cypress": "^12.17.4", "dotenv-webpack": "^8.0.1", "eslint": "^8.44.0", @@ -10528,6 +10529,79 @@ "node": ">= 0.8.0" } }, + "node_modules/compression-webpack-plugin": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/compression-webpack-plugin/-/compression-webpack-plugin-11.0.0.tgz", + "integrity": "sha512-Nz9dMiu0sag+mgJ5QTkRx0+vwrDZPU/gps7IdrkFE+oRSkgyoX4wbMol7QnXjI5/TEWx8yEwew9MiMjZgdLtjg==", + "dev": true, + "dependencies": { + "schema-utils": "^4.2.0", + "serialize-javascript": "^6.0.2" + }, + "engines": { + "node": ">= 18.12.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^5.1.0" + } + }, + "node_modules/compression-webpack-plugin/node_modules/ajv": { + "version": "8.12.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz", + "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==", + "dev": true, + "dependencies": { + "fast-deep-equal": "^3.1.1", + "json-schema-traverse": "^1.0.0", + "require-from-string": "^2.0.2", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/compression-webpack-plugin/node_modules/ajv-keywords": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz", + "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==", + "dev": true, + "dependencies": { + "fast-deep-equal": "^3.1.3" + }, + "peerDependencies": { + "ajv": "^8.8.2" + } + }, + "node_modules/compression-webpack-plugin/node_modules/json-schema-traverse": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", + "dev": true + }, + "node_modules/compression-webpack-plugin/node_modules/schema-utils": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz", + "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==", + "dev": true, + "dependencies": { + "@types/json-schema": "^7.0.9", + "ajv": "^8.9.0", + "ajv-formats": "^2.1.1", + "ajv-keywords": "^5.1.0" + }, + "engines": { + "node": ">= 12.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + } + }, "node_modules/compression/node_modules/bytes": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", @@ -21428,9 +21502,9 @@ "dev": true }, "node_modules/serialize-javascript": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz", - "integrity": "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz", + "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==", "dev": true, "dependencies": { "randombytes": "^2.1.0" diff --git a/frontend/package.json b/frontend/package.json index a87ef3d6..d9dba4f1 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -29,7 +29,6 @@ "zustand": "^4.4.3" }, "devDependencies": { - "msw-storybook-addon": "^1.8.0", "@babel/core": "^7.22.8", "@babel/preset-env": "^7.22.7", "@babel/preset-react": "^7.22.5", @@ -58,6 +57,7 @@ "babel-plugin-styled-components": "^2.1.4", "browser-image-compression": "^2.0.2", "chromatic": "^6.19.9", + "compression-webpack-plugin": "^11.0.0", "cypress": "^12.17.4", "dotenv-webpack": "^8.0.1", "eslint": "^8.44.0", @@ -70,6 +70,7 @@ "jest": "^29.6.2", "jest-environment-jsdom": "^29.6.2", "msw": "^1.2.2", + "msw-storybook-addon": "^1.8.0", "prettier": "^3.0.0", "process": "^0.11.10", "react-refresh": "^0.14.0", diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 4b8acbdd..5b6a37c9 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -33,8 +33,6 @@ if (process.env.REACT_APP_GOOGLE_ANALYTICS) { ReactGA.initialize(process.env.REACT_APP_GOOGLE_ANALYTICS); } -const queryClient = new QueryClient(); - root.render( diff --git a/frontend/webpack.common.js b/frontend/webpack.common.js index d9286c09..2a5777a5 100644 --- a/frontend/webpack.common.js +++ b/frontend/webpack.common.js @@ -2,6 +2,8 @@ const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const { ProvidePlugin, DefinePlugin } = require('webpack'); const DotenvWebpackPlugin = require('dotenv-webpack'); +const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); +const CompressionPlugin = require('compression-webpack-plugin'); module.exports = { entry: { @@ -27,6 +29,16 @@ module.exports = { new DotenvWebpackPlugin({ systemvars: true, }), + new BundleAnalyzerPlugin({ + openAnalyzer: false, + }), + new CompressionPlugin({ + filename: '[path][base].gz', + algorithm: 'gzip', + test: /\.js$|\.css$|\.html$/, + threshold: 10240, + minRatio: 0.8, + }), ], resolve: { extensions: ['.tsx', '.ts', '.jsx', '.js'],