module

[kisstest]

chrome devtools coverage 결과 현재 필요없는 사용되지 않는 element의 컴포넌트들이 초기 렌더링시 호출되고 잇음

list

• font awesome(600kb~)
• element ui(400kb~)

이슈

• 플러그인에서 element ui를 호출할 때 현재 쓰고 있는 컴포넌트만 단일로 호출, 하지만 DevTools Lighthouse, webpack-bundle-analyzer에서 별다른 변화가 없음

참고

• element ui
• 트리 쉐이킹으로 자바스크립트 페이로드 줄이기
• 예외사항

font-awesome

1. orginal report.html.zip

   

2. tree shaking main.js에서 현재 쓰고있는 아이콘만 선택적으로 improt

   • index.es.js파일 680kb => 73kb까지 줄어듬 report.html.zip

3. 매번 컴포넌트에서 사용된(혹은 사용될) 아이콘을 체크하여 라이브러리에 추가 할수는 없다

   • 참고
   • font-awesome아이콘이 사용될 컴포넌트에 자동으로 import해줄 코드(모듈)이 필요...
   • 현재는 main.js에서 필요한 아이콘을 추가하던 코드를 아이콘이 필요한 컴포넌트에 추가

4. element-ui reduce-element-ui.html.zip

   

• element-ui는 es6가 아닌 CommonJS module을 사용하고 있으므로 동적 임포트를 바로 할 수 없다. 따라서 tree-shaking을 할수 없으므로 babel이 element-ui를 es5로 transpile하지 않게 변경해야됨.
• 컴포넌트마다 element-ui를 동적 임포트하는 코드를 모듈화 필요
  • 해당 컴포넌트에 필요한 엘리먼트의 css를 임포트하고 vue components에 dynamic import를 할 수 있는 모듈
  • 엘리먼트의 이름만 있으면 뷰 컴포넌트에서 자동으로 임포트

Chrome Lighthouse(Device mobile)

1. before dynamic import 127.0.0.1_8887-20200620T184210.html.zip

2. [font-awesome, element-ui] after dynamic import 127.0.0.1_8887-20200620T183319.html.zip