vue(vue-cli)에서 component preload prefetch 기능 끄기

code-spitting을 확인하는 과정중에 뭔가 제대로 기능 동작이 안되는것같은 느낌을 받았는데 preload prefetch 때문이었다.

vue-cli에선 이 기능들이 기본으로 들어가 있기때문에 이걸 꺼줘야하는데 preload prefetch 기능을 끌려면

vue-cli로 프로젝트를 생성했기 때문에 웹팩설정파일이 노출이 안되어있는 상태이므로 vue.config.js에서 설정해준다.

 

첫 페이지 진입시 로드되는 컴포넌트를 봤는데 필요없는 친구들이 목록에 포함되어있는걸 확인했다.

preload prefetch된 애들인듯?

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.plugins.delete('prefetch')
    config.plugins.delete('preload')
  },
}

위의 옵션들을 추가하고 다시 빌드

아주 깔끔해졌다.

 

하지만, 위의 옵션은 모든 preload prefetch을 해제하는 것인데, 각각의 사이트에따라 미리 배치하면 좋은 경우가 있을꺼라고 본다.

필요없는 친구만 빼는 방법도 아마 있을꺼니깐 필요한사람들은 찾아서 해보시고 댓글좀.. 달아주시면 감사합니다!! 

 

2022.09.27 추가 작성

prefetch preload가 이루어지는 시간은 idle time이라고 초기로딩과는 관련없는 잉여타임에 이루어진다고 한다. 즉, Core Web Vitals에는 영향이 없는것으로 생각되어지므로 되도록 이 기능은 true로 해두는게 좋을꺼 같다.

 

 

그리고 잠시 여담..

@babel/plugin-syntax-dynamic-import는 따로 추가안해줘도 vue-cli의 babel/preset에 들어있다.

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
}