Refactor/#650: 웹팩 최적화 검토 (#651)

* chore: setting json option 값 수정

* fix: 중첩 queryClient 오류 제거

* chore: eslint 설정 rule off 추가

* chore: bundle analyzer 오픈

* refactor: gzip 적용

* refactor: analyzer 사용 종료

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': {

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",

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",

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'],