신규 사이트를 vue.js 로 개발했다.
서버 개발자로서 jQuery만 사용하다가 프론트 프레임워크를 사용해보니,
자바스크립트가 이렇게 어려운 언어?였나?? 오오 빌드되고 있어!! 이런 나날들이다.
어느 덧, 오픈 시점이 다가온 지금.. 구글 광고를 붙이기 전에 LightHouse 를 통해 점수를 확인해보았다.
스크립트 내용 중에 얼마나 사용하지 않는 것일까?
다행히도 구글에서 사용하지 않는 script나 css는 체크해주는 coverage 툴을 안내해줬다. 게다가 따로 설치할 필요없었다. 개발자 툴에서 메뉴(:) > more tool > coverage 선택 후 새로고침하면 된다.
해당 소스를 클릭하면
이런 기능이 있었다니.. 👀😲
해결
나의 경우에는 element-ui 전체 모듈을 갖다 써서 저런 문제가 있었는데, 사용하는 모듈만 vue 에 추가하는 방식으로 변경하도록 했다.
import Vue from 'vue';
/**
* (X) 이렇게 쓰면 unused javascript 현상 발생!
import ElementUI from 'element-ui';
Vue.use(ElementUI);
*/
// (O) 사용하는 UI 모듈을 각각 추가하자
import { Button, Select } from 'element-ui';
import App from './App.vue';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* or
* Vue.use(Button)
* Vue.use(Select)
*/
new Vue({
el: '#app',
render: h => h(App)
});
마치며..
첫번째는 구글에서는 웹사이트 최적화를 위해 Coverage 툴이 제공하고 있다는 것! 어머나.. 맘껏 사용해보자.
두번째는 Front Framework 가 빌드되면서, 사용하지 않는 코드를 없애는 줄 알았다. Front Framework 만능이 아니라는 것.
'FRONT' 카테고리의 다른 글
[node] request / http 가져올때 reponse body 깨짐 오류 (0) | 2021.01.04 |
---|---|
[vue-cli] html 컴파일에 캐쉬 기능 (Hash) 넣기 (0) | 2020.11.27 |