Vue.js 사이트에서의 사용은 NG이지만, Vue.js에서의 개발은 포기하지 않은 이야기

절반 재료이지만 절실해야 시행 착오 결과입니다.

무슨 일이야?

상대적으로 페이지 수가 많은 사이트를 만들 때,

범용 부품의 코딩 품질 담보 때문에, 컴퍼넌트 베이스의 개발이 이상적이었다

Vue.js의 구성 요소를 사용한 개발 고려

여러 가지 이유로 사이트에서 Vue.js에서의 사용이 NG가 되었다.

개발은 Vue의 컴퍼넌트를 이용해, 프리 렌더링 출력한 정적 HTML와 CSS를 프로덕션 환경에 사용하기로 했다

일반적으로 프리 렌더링은 SEO 대책을 위해서 실시하는 것입니다만, 이번은 어디까지나 컴퍼넌트 베이스로의 개발, 및 정적 HTML 와 CSS 의 생성을 목적으로 하고 있습니다.

샘플

샘플 코드 세트는 여기입니다.
htps : // 기주 b. 코 m / 메구로 ck / ゔ 에- 아 s mp ぁ 테 엔기네

이런 식으로 코딩합니다.

특히 의미는 없습니다만, HelloWorld 컴퍼넌트를 v-for 과 Pug 의 while 구문 로 각각 써 보았습니다 예입니다. 이 비교에서는 v-for 쪽이 심플하고 사용하기 편리하지만, 프리 렌더링 되어 버리면, 어느쪽에도 차이는 없습니다.

index.pug

section
  h2 v-for でループ
  hello-world(msg="Hello, Vue!" v-for="n in 2")

section 
  h2 Pug の while 構文でループ
  - var count = 0
    while ++count <= 2
      hello-world(msg="Hello, Pug!!")

이것은 단일 파일 구성요소에서 만든 HelloWorld 구성 요소입니다. msg 속성에서 받은 문자열을 <p class="hello-world">으로 출력합니다.

HelloWorld.vue

<template lang="pug">
p.hello-world {{ msg }}
</template>

<script lang="ts">
export default {
  props: {
    msg: { type: String, default: 'Hello, World!' }
  }
}
</script>

<style lang="scss">
.hello-world { color: #42b983; }
</style>

프리 렌더하면 이렇게됩니다.

프리렌더를 실행하면 다음 html과 css가 출력됩니다.

$ yarn prerender

prerendered/index.html

<section>
  <h2>v-for でループ</h2>
  <p class="hello-world">Hello, Vue!</p>
  <p class="hello-world">Hello, Vue!</p>
</section>
<section>
  <h2>Pug の while 構文でループ</h2>
  <p class="hello-world">Hello, Pug!!</p>
  <p class="hello-world">Hello, Pug!!</p>
</section>

components.css

.hello-world { color: #42b983; }

프리 렌더링 정보

Vue.js의 프리 렌더링에는 Prerender SPA Plugin과 Nuxt generate을 사용한 구현이 유명하다고 생각합니다. 를 사용했습니다.

prerenderer 플러그인은 거의 프리렌더 스크립트으로 유지됩니다. Puppeteer 와 JSDOM 의 어느쪽이든을 사용한 렌더러―를 선택할 수 있습니다만, JSDOM 구현의 쪽은 고속으로, 한편 Puppeteer 쪽은 신뢰도가 높다고 하는 것입니다.

약간의 주의점입니다만, prerenderer 플러그인은 아직 동작이 안정되어 있지 않다는 것 같고, 실제로 대량의 페이지를 대상으로 프리렌더링을 실행하면, Node의 비동기 처리로 타임 아웃 에러를 일으키게 되는 것이 있었습니다. 해결 방법으로 대상 페이지 지정에 샘플 코드을 적용하여 파일 수를 줄이면서 실행할 수 있습니다.

포스트 프로세스

프로덕션 환경에는 Vue.js나 구성 요소에 대한 스크립트가 필요하지 않으므로 사전 렌더링된 HTML 태그에서 <script> 태그 설명을 삭제한 다음 파일을 내보냅니다.

prerender.js

/**
 * <script> タグをすべて削除
 * （必要な JS がある場合は、もう少し丁寧な正規表現を書いてください）
 */
function postProcessHtml(html) {
  return html
    .replace(/\s*<script[^<]*<\/script>\s*/igm, '')
    .trim()
}

JS는 어떻게 할 것인가?

날카로운 사람은 "HTML과 CSS는 좋지만 JS는 어떻게합니까?"에서 구성 요소의 동작은 작성하지 않습니다. 깨끗하게 포기하고 별도의 JS를 작성합시다.

이상이 됩니다.

glob
13일차 FORK Advent Calendar 2018 Google Apps Script에서 신청 양식 작성 및 행아웃 채팅과의 연계
15일차 @pino_dmdm Photoshop에서 이미지를 슬라이스하는 JS