Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 6 commits into from
Feb 12, 2024
+95 −8
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
dff71b2
chore: setting json option 값 수정
semnil5202 Feb 9, 2024
e897eec
fix: 중첩 queryClient 오류 제거
semnil5202 Feb 9, 2024
9c63956
chore: eslint 설정 rule off 추가
semnil5202 Feb 9, 2024
c09d286
chore: bundle analyzer 오픈
semnil5202 Feb 9, 2024
053fe0d
refactor: gzip 적용
semnil5202 Feb 10, 2024
5fd5a9a
refactor: analyzer 사용 종료
semnil5202 Feb 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions frontend/.eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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': {
Expand Down
4 changes: 2 additions & 2 deletions frontend/.vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
80 changes: 77 additions & 3 deletions frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오호 이 라이브러리를 이용해 gzip을 적용할 수 있군요!! 👍

"cypress": "^12.17.4",
"dotenv-webpack": "^8.0.1",
"eslint": "^8.44.0",
Expand All @@ -70,6 +70,7 @@
"jest": "^29.6.2",
"jest-environment-jsdom": "^29.6.2",
"msw": "^1.2.2",
"msw-storybook-addon": "^1.8.0",
Comment on lines 72 to +73
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

msw끼리 모아둔 꼼꼼함 😆

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

옷~ 이건 의도하지 않았는데 npm i 하면서 자동 정렬된거 같군영~

"prettier": "^3.0.0",
"process": "^0.11.10",
"react-refresh": "^0.14.0",
Expand Down
2 changes: 0 additions & 2 deletions frontend/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
<QueryClientProvider client={queryClient}>
<ThemeProvider theme={theme}>
Expand Down
12 changes: 12 additions & 0 deletions frontend/webpack.common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -27,6 +29,16 @@ module.exports = {
new DotenvWebpackPlugin({
systemvars: true,
}),
new BundleAnalyzerPlugin({
openAnalyzer: false,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

확인하고 바로 false하는 꼼꼼함 멋지네요ㅋㅋㅋㅋㅋㅋ

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ㅋㅋㅋㅋㅋ run dev 할때마다 창 두 개 뜨는게 조큼 별로라..

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍👍👍

}),
new CompressionPlugin({
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

클라우드프론트하는것보다 훨씬 간단하네여
핑프라 그런데 뭐가 더 성능이 좋은건가요?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

성능적인 부분까지는 파악하지 못했네요. 아마 압축 알고리즘이 gzip으로 동일해서 성능은 동일하지 않나.. 추측해봅니다.

이 글에 의하면 클라운드 프론트에서는 압축 실행, 해제 이정도 단위로 수행할 수 있는 것 같은데 웹팩에서는 조금 더 상세한 설정이 가능했습니다.

threshold : 설정한 크기 보다 큰 것만 압축 수행
minratio: 압축 결과가 원본의 0.8 이하의 비율로 압축된 것만 압축 수행

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cloudFront를 못 써서 gzip이 안된다는걸 간과했는데 세인이 잘 짚어주신 것 같습니다!!

그런데 혹시 아이크가 말한 '핑프' << 는 무엇일까요?!!! 줄임말에 넘나 약해서... ㅎㅎㅎㅎ

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ㅋㅋㅋㅋㅋㅋㅋㅋ핑프란 핑거프린세스로 직역하면 공주님 손가락인데 보통 의미는 무언가를 찾지 않고 남에게만 물어보는 (귀찮아서) 그런 사람을 지칭하는 말입니다.

근데 원래 리뷰라는게 남이 아는걸 질문해서 빠르게 알아가는 장점도 있는거져~

filename: '[path][base].gz',
algorithm: 'gzip',
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.8,
}),
],
resolve: {
extensions: ['.tsx', '.ts', '.jsx', '.js'],
Expand Down
Loading