[웹사이트 최적화] 사용하지 않는 스크립트 코드 없애기

신규 사이트를 vue.js 로 개발했다.

서버 개발자로서 jQuery만 사용하다가 프론트 프레임워크를 사용해보니,

자바스크립트가 이렇게 어려운 언어?였나?? 오오 빌드되고 있어!! 이런 나날들이다.

 

어느 덧, 오픈 시점이 다가온 지금.. 구글 광고를 붙이기 전에 LightHouse 를 통해 점수를 확인해보았다.

Remove unused Javascript - 미사용 스크립트

 

스크립트 내용 중에 얼마나 사용하지 않는 것일까?

다행히도 구글에서 사용하지 않는 script나 css는 체크해주는 coverage 툴을 안내해줬다. 게다가 따로 설치할 필요없었다. 개발자 툴에서 메뉴(:) > more tool > coverage 선택 후 새로고침하면 된다.

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 만능이 아니라는 것.