Vue CLI 3 RC. 그리고 모던 모드 빌드
2018년 06월 14일 드디어 Vue CLI 3의 릴리즈 캔디데이트 버전이 출시되었습니다.
2018년 06월 14일 드디어 Vue CLI 3의 릴리즈 캔디데이트 버전이 출시되었습니다.
이번에 추가된 기능 중 눈여겨 볼 부분은 모던모드입니다. 모던모드에 관한 소개는 Vue CLI 문서 중 브라우저 호환성의 모던모드입니다. 모던 모드는 최신 브라우저에서 지원하는 <script type="module"></script>와 <script nomodule>을 이용합니다.
Vue.js 앱을 빌드할 때 구 버전 브라우저를 위한 폴리필을 하는데 이로인해 빌드 결과가 커집니다. 공식 문서에서는 단순한 헬로월드 앱의 경우 약 16%의 크기 차이가 발생한다고 합니다. Vue를 이용한 앱 개발을 하면 필연적으로 폴리필이 필요한 코드들이 많아지게 됩니다.
vue create를 이용해 빌드한 결과입니다. 파일 이름에 -legacy가 있는 파일의 총 크기는 약 80kb, 없는 파일은 67kb 입니다. 문서의 설명대로 약 16%의 차이가 발생합니다. lodash, moment등의 라이브러리 등은 이미 babel을 통해 구형 브라우저 지원을 하고 있기 때문에 모던 모드의 효과가 크지는 않아보입니다. 앱에 관련된, 개발자가 직접 만든 모듈에서 큰 효과를 볼 수 있을 것으로 보입니다.
모던 모드로 빌드한 경우의 index.html 파일의 내용입니다. 최신 브라우저의 경우와 구형 브라우저의 호출 시점이 다르고, 자바스크립트 파일을 처리하는 여러 코드이 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel=icon href=/favicon.ico>
<title>hello-world</title>
<link as=style href=/css/app.c4563333.css rel=preload>
<link as=script href=/js/app.7b78dcfb.js rel=modulepreload>
<link as=script href=/js/chunk-vendors.cd6a8734.js rel=modulepreload>
<link href=/css/app.c4563333.css rel=stylesheet>
</head>
<body>
<noscript>
<strong>We're sorry but hello-world doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id=app></div>
<script type=module src=/js/chunk-vendors.cd6a8734.js></script>
<script type=module src=/js/app.7b78dcfb.js></script>
<script>
! function () {
var e = document,
t = e.createElement("script");
if (!("noModule" in t) && "onbeforeload" in t) {
var n = !1;
e.addEventListener("beforeload", function (e) {
if (e.target === t) n = !0;
else if (!e.target.hasAttribute("nomodule") || !n) return;
e.preventDefault()
}, !0), t.type = "module", t.src = ".", e.head.appendChild(t), t.remove()
}
}();
</script>
<script src=/js/chunk-vendors-legacy.8027cedc.js nomodule></script>
<script src=/js/app-legacy.cdc5d9b2.js nomodule></script>
</body>
</html>참고할 내용