SeouliteLab

[Vue.js] Vue 컴파일러 옵션 중 comments 설정 이해하기 본문

카테고리 없음

[Vue.js] Vue 컴파일러 옵션 중 comments 설정 이해하기

Seoulite Lab 2024. 4. 25. 08:14

Vue.js에서는 컴파일 시 템플릿 내의 주석을 유지하거나 제거할 수 있는 compilerOptions 중 하나로 comments 설정을 제공합니다. 이 설정을 사용하면 템플릿 내의 주석을 유지하거나 제거하여 최종 빌드 파일의 크기를 관리할 수 있습니다.

comments 설정이란?

comments 설정은 Vue 템플릿 컴파일러에서 사용되는 옵션으로, 템플릿 내의 주석을 유지하거나 제거하는 방법을 결정합니다. 이를 통해 개발 중에는 주석을 유지하여 코드의 가독성을 높이고, 프로덕션 빌드 시에는 주석을 제거하여 최종 파일의 크기를 줄일 수 있습니다.

예제

아래 예제에서는 comments 옵션을 사용하여 템플릿 내의 주석을 유지하거나 제거하는 방법을 보여줍니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 컴파일러 옵션 - comments 예제</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>

<div id="app">
  <p>안녕하세요, {{ name }}님!</p>
  <!-- 이 부분은 주석입니다. -->
</div>

<script>
  // compilerOptions 설정을 통해 comments 옵션을 설정합니다.
  Vue.config.compilerOptions.comments = false; // 주석 제거

  // 애플리케이션 생성
  const app = Vue.createApp({
    data() {
      return {
        name: 'Vue.js'
      };
    }
  });

  // 애플리케이션을 #app 요소에 마운트
  app.mount('#app');
</script>

</body>
</html>
저작자표시 비영리 변경금지