테스트 환경
- Mac OS : Macbook Pro 2019, I9, 32GB
- Docker machine : 프로세서 2개, 메모리 4GB
- Yarn v1.22.5
- 사용한 packakge.json은 최하단에 위치
- offline node package는 미리 준비한 상태
online install은 인터넷을 통하여 node module package를 설치하는 것을 말한다.offline install은yarn-offline-mirror와yarn-offline-mirror-pruning옵션이 설정exist cache는 yarn install 시 생성되는 캐시를 제거하지 않은 상태를 말한다.no cache는 yarn cache clean 명령어로 캐시를 제거한 상태를 말한다.
목적
- 현재 회사에서 개발중인 서비스는 AWS CodeBuild에서 빌드 중이고 빌드 시간을 단축 시키기 위해서 서비스의 의존성 패키지들을 캐싱한 서비스 빌드 전용 이미지 제작
- Yarn Offline Install을 이용하여 의존성 패키지 설치 시간 단축
테스트
In Docker machine
| offline / no cache (clean) | offline / existed cache | online / no cache (clean) | online / existed cache |
| Done in 400.27 s | Done in 353.12 s | Done in 391.37 s | Done in 346.61 s |
Mac OS
| offline / no cache (clean) | offline / existed cache | online / no cache (clean) | online / existed cache |
| Done in 68.91 s | Done in 38.59 s | Done in 70.30 s | Done in 41.84 s |
결론
- Docker 이미지에 의존성 패키지를 포함 시켜도 전체적인 빌드 시간에 영향이 거의 없었다.
- CodeBuild에서 Docker 이미지를 다운로드 받는 시간이 늘어났고
- 실제로 Offline install은 실제로 설치 시간 향상은 미미했다.
- 장점도 있긴하다
- AWS 밖에서 들어오는 트래픽이 적어져서 요금 절약이 가능하다.
- 네트워크 상황에 따라 때로는 속도가 빠를 수 있다.
- 하지만 근본적으로 JavaScript Bundle Diet를 통하여 근본적인 문제를 먼저 해결해야한다.
(Toss Core Front-End Developer 이한님의 Session 참조 : Toss 공식 링크, Youtube 링크)
🤝 사용한 Package.json (Click 시 펼쳐집니다.)
{
"dependencies": {
"@datepicker-react/styled": "^2.7.0",
"@material-ui/core": "^4.11.0",
"@material-ui/data-grid": "^4.0.0-alpha.6",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.56",
"@react-google-maps/api": "^2.0.2",
"@storybook/addon-actions": "^5.3.19",
"@storybook/addon-links": "^5.3.19",
"@storybook/addons": "^5.3.19",
"@storybook/react": "^5.3.19",
"@svgr/webpack": "4.3.3",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"axios": "^0.20.0",
"camelcase": "^5.3.1",
"case-sensitive-paths-webpack-plugin": "2.3.0",
"chart.js": "^2.9.4",
"classnames": "^2.2.6",
"clsx": "^1.1.1",
"concurrently": "^5.3.0",
"connected-react-router": "^6.9.1",
"css-loader": "3.4.2",
"dateformat": "^4.0.0",
"dotenv": "8.2.0",
"dotenv-expand": "5.1.0",
"eslint-loader": "3.0.3",
"eslint-plugin-flowtype": "^5.2.0",
"file-loader": "4.3.0",
"fs-extra": "^8.1.0",
"history": "^4.7.2",
"html-webpack-plugin": "4.0.0-beta.11",
"http-proxy-middleware": "^1.0.5",
"identity-obj-proxy": "3.0.0",
"immer": "^7.0.9",
"json2csv": "^5.0.5",
"leaflet": "^1.7.1",
"leaflet-geosearch": "^3.3.1",
"leaflet.markercluster": "^1.5.0",
"lodash": "^4.17.20",
"mini-css-extract-plugin": "0.9.0",
"optimize-css-assets-webpack-plugin": "5.0.3",
"pnp-webpack-plugin": "1.6.4",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-normalize": "8.0.1",
"postcss-preset-env": "6.7.0",
"postcss-safe-parser": "4.0.1",
"react": "^16.13.1",
"react-app-polyfill": "^2.0.0",
"react-cookie": "^4.0.3",
"react-datepicker": "^3.4.1",
"react-daum-postcode": "^2.0.2",
"react-dev-utils": "^10.2.1",
"react-dom": "^16.13.1",
"react-ga": "^3.3.0",
"react-geocode": "^0.2.3",
"react-gtm-module": "^2.0.11",
"react-leaflet": "^3.1.0",
"react-leaflet-markercluster": "^3.0.0-rc1",
"react-number-format": "^4.4.1",
"react-redux": "^7.2.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-sortable-hoc": "^1.11.0",
"react-text-mask": "^5.4.3",
"react-toastify": "^7.0.3",
"react-tooltip": "^4.2.11",
"redux": "^4.0.5",
"redux-actions": "^2.6.5",
"redux-devtools-extension": "^2.13.8",
"redux-logger": "^3.0.6",
"redux-saga": "^1.1.3",
"resolve": "1.15.0",
"resolve-url-loader": "3.1.1",
"semver": "6.3.0",
"style-loader": "0.23.1",
"styled-components": "^5.2.0",
"ts-pnp": "1.1.6",
"typescript": "^4.2.3",
"url-loader": "2.3.0",
"uuid": "^8.3.1"
},
"devDependencies": {
"@babel/core": "7.9.0",
"@react-google-maps/marker-clusterer": "^2.1.1",
"@types/chart.js": "^2.9.30",
"@types/classnames": "^2.2.11",
"@types/dateformat": "^3.0.1",
"@types/history": "^4.7.3",
"@types/jest": "^26.0.15",
"@types/json2csv": "^5.0.1",
"@types/leaflet": "^1.7.0",
"@types/leaflet-markercluster": "^1.0.3",
"@types/lodash": "^4.14.165",
"@types/node": "^14.14.8",
"@types/node-geocoder": "^3.24.1",
"@types/react": "^16.9.56",
"@types/react-datepicker": "^3.1.3",
"@types/react-dom": "^16.9.9",
"@types/react-geocode": "^0.2.0",
"@types/react-gtm-module": "^2.0.0",
"@types/react-helmet": "^6.1.0",
"@types/react-leaflet-markercluster": "^2.0.0",
"@types/react-redux": "^7.1.11",
"@types/react-router": "^5.1.13",
"@types/react-router-dom": "^5.1.6",
"@types/react-text-mask": "^5.4.6",
"@types/redux-actions": "^2.6.1",
"@types/redux-logger": "^3.0.8",
"@types/styled-components": "^5.1.4",
"@types/uuid": "^8.3.0",
"@typescript-eslint/eslint-plugin": "^4.8.2",
"@typescript-eslint/parser": "^4.8.2",
"babel-eslint": "10.1.0",
"babel-jest": "^24.9.0",
"babel-loader": "8.1.0",
"babel-plugin-named-asset-import": "^0.3.6",
"babel-preset-react-app": "^9.1.2",
"cross-env": "^7.0.2",
"eslint": "^7.13.0",
"eslint-config-airbnb": "18.2.0",
"eslint-config-prettier": "^6.12.0",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-import": "^2.21.2",
"eslint-plugin-jsx-a11y": "^6.3.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "4.0.0",
"jest": "24.9.0",
"jest-environment-jsdom-fourteen": "1.0.1",
"jest-resolve": "24.9.0",
"jest-watch-typeahead": "0.4.2",
"node-sass": "^4.14.1",
"open-color": "^1.7.0",
"prettier": "^2.1.2",
"sass-loader": "^9.0.2",
"terser-webpack-plugin": "2.3.5",
"webpack": "4.42.0",
"webpack-dev-server": "3.10.3",
"webpack-manifest-plugin": "2.2.0",
"workbox-webpack-plugin": "4.3.1"
}
}
musma.github.io/2019/08/23/nodejs-offline-deployment.html
classic.yarnpkg.com/blog/2016/11/24/offline-mirror/
'Language & Library > FE DevOps' 카테고리의 다른 글
| yarn-deduplicate로 번들 사이즈 줄이기 (0) | 2021.06.09 |
|---|
댓글