1. 초기 렌더링 속도 개선하기 ( Webpack 번들 크기 줄이기, 코드 스플리팅)
https://suspicious-pare-a66702.netlify.app/develop/initialRenderingOnVue/
https://suspicious-pare-a66702.netlify.app/develop/initialrenderingonvue/
최근 회사의 모바일 어플리케이션을 개발하고 있는 중에 초기 렌더링 속도의 개선에 대해 큰 필요성을 느꼈다. 우리 회사는 Native에서 프론트에 Webview를 요청하면 webpack으로 빌드되어 있는 파일
suspicious-pare-a66702.netlify.app
2. 웹팩 용량 최적화
https://romeoh.tistory.com/367
[Vue + typescript] 웹팩 용량 최적화하기
$ npm run stg VUE.JS 목록 package.json { ... "scripts": { "serve": "vue-cli-service serve", ... "stg": "vue-cli-service serve --mode production", }, ... } production으로 빌드하면 아래와 같은 경고가 표시됩니다. warning asset size limit:
romeoh.tistory.com
3. webpack-bundle-analyzer 설정 상세
(yarn add -D webpack-bundle-analyer)
https://satisfactoryplace.tistory.com/359
[React] webpack-bundle-analyzer를 이용한 번들 사이즈 최적화
npm run build후 결과물로 번들링된 javascript가 출력된다. 이 bundle의 크기가 크면 SEO의 단점인 '첫 로딩 속도'가 부각되므로, 번들 사이즈 관리는 매우 중요하다. 그렇다면 이 번들 사이즈가 얼마나
satisfactoryplace.tistory.com
'Front-end > Vue.js(Nuxt.js)' 카테고리의 다른 글
| Vue.js 라우터 네비게이션 가드 (0) | 2022.11.05 |
|---|---|
| Push 알림 - FCM(firebase cloud message) (0) | 2022.11.05 |
| Vue LifeCycle (0) | 2022.10.18 |
| 크롬으로 안드로이드 디버깅하기 (네이티브 앱과 연동) (0) | 2022.10.08 |
| Vue-Cookie 설정 및 개념 (0) | 2022.10.02 |