Vue.js 세번째

과거 글을 보는 중 삭제 버튼을 눌러 다시 정리한다....

 

App.vue 앱에서 link 를 받아 router 가 화면을 띄우는 방법은 두 가지이다. ( router 에 페이지, 컴포넌트를 연결하는 방법 )

1. import 방식

2. code-splitting 방식

2-2. code-splitting 에서 webpackprefetch 사용하기

어떻게 다른지 확인해보자

 

이 과정 전에 해야할 설정변경이 있다.

** 설정변경

Settings > formatter > Prettier > Code formatter 로 변경

새로운 .prettierrc 파일 만들어서 안에 작성

{
  "semi": false,
  "bracketSpacing": true,
  "singleQuote": true,
  "useTabs": false,
  "trailingComma": "none",
  "printWidth": 80
}

package.json 안 rules 에 추가

"rules": {
      "space-before-function-paren": "off"
    }

 

1. View 를 import 하기

우리가 만든 .vue 파일들은 모두 js 파일로 바뀌어서 실행이 된다. 

이때 이런 방식으로 만들어진 View 들은 js 형식으로 app.js 로 모두 들어가게 된다.

 

2. code-splitting 방식

component: () => import() 형식으로 만들게 되면 새로운 js 파일로 만들게 된다.

 

2-2. weapackPrefetch:true 사용

당장은 쓸 것은 아닌데 가까운 미래에 쓸 가능성이 높은 것들 미리 캐시에 담아두는 것이다.

 

정리하자면

1. 무조건 쓰는 페이지는 import 해놓기

2. 들어갈 확률이 적고 페이지 사이즈가 작으면 code-splitting 방식을 쓰기

3. 가까운 미래에 쓸 가능성이 높고 너무 사이즈가 크면 webpackPrefetch 로 캐시에 담아두기