Vue 앱 속도 향상: 가장 예상치 못한 가장 어리석은 방법 🤪🚀

저번에 Vue'sv-model를 실험하고 있었습니다. Vue 문서의 내용v-model이 사실인지 확인하고 싶었습니다. 그들이 말하는 내용은 다음과 같습니다.

Remember that:

<input v-model="searchText">

does the same thing as:

<input 
  v-bind:value="searchText" 
  v-on:input="searchText = $event.target.value">

이 구문은 양식 컨트롤(any, really)의 v-model prop을 설정하고 value 이벤트에 대한 이벤트 리스너의 대상 값으로 prop을 설정하여 다시 빌드input할 수 있음을 나타냅니다. 간단하죠?

언뜻 보기에 그것은 매우 사실입니다. 그들은 같은 일을 합니다. 다른 곳에서 소품을 업데이트하면 입력 필드에 기록된 내용이 업데이트되고 입력 필드를 업데이트하면 소품이 업데이트됩니다.

하지만 생성된 코드를 살펴보고 실제로 동일한지 확인하겠습니다.

우리가 작업할 예제 앱은 이를 위해 빌드할 수 있는 가장 기본적인 예제입니다.

<template>
  <div>
    <input
      v-model="someProp"
    >
    {{ someProp }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      someProp: 'Foobar',
    }
  }
}
</script>

입력 필드와 텍스트 노드가 있는 간단한 템플릿인 스크립트는 텍스트에 일부 기본값을 제공합니다.

다음으로 npm run build를 실행하고 생성된 dist/js/app.something.js를 엽니다. 어, 축소되었습니다. 하지만 내 IDE가 처리할 수 없는 것은 없습니다. someProp에 대해 빠른 Ctrl+F를 수행하면 코드의 관련 부분이 표시됩니다.

return n("div", [n("input", {
  directives: [{
    name: "model",
    rawName: "v-model",
    value: e.someProp,
    expression: "someProp"
  }], 
  domProps: { value: e.someProp }, 
  on: {
    input: function (t) {
      t.target.composing || (e.someProp = t.target.value)
    }
  }
}) // ... ])

여기서는 위의 구성 요소를 볼 수 있지만 렌더링 함수로 표현됩니다. 흥미로운 부분은 domProps 및 on 키입니다. 양방향 바인딩을 생성한 방법v-model을 알려줍니다.

이제 :value 및 @input를 대신 사용하도록 위의 구성 요소를 다시 빌드해 보겠습니다.

<template>
  <div>
    <input
      :value="someProp"
      @input="e => someProp = e.target.value"
    >
    {{ someProp }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      someProp: 'Foobar',
    }
  }
}
</script>

그리고 생성된 코드를 얻기 위해 이전과 동일한 속임수를 수행합니다.

return n("div", [n("input", {
  domProps: { value: e.someProp },
  on: {
    input: function (t) {
      return e.someProp = t.target.value
    }
  }
}) // ... ])

차이점이 보이시나요? directives 키가 없습니다. 그다지 놀라운 일은 아닙니다. 우리는 결국 v-model 지시문을 사용하지 않습니다. 맞습니까? 기능의 유일한 차이점은 "자체 제작"버전의 누락t.target.composing ||입니다. 하지만 다음과 같이 추가할 수 있습니다.

<input
  :value="someProp"
  @input="e => e.target.composing || (someProp = e.target.value)"
>

우리가 얻을 것은 이것입니다:

return n("div", [n("input", {
  domProps: { value: e.someProp }, 
  on: {
    input: function (t) {
      t.target.composing || (e.someProp = t.target.value)
    }
  }
}) // ... ])

그리고 그것은 v-model 와 동일합니다. 하지만 directives 키가 없습니다.

그리고 그것이 요점입니다.
@input + :value 접근 방식을 사용하면 빌드된 JS가 v-model 사용당 약 85바이트 더 작아집니다(예상, 변수 이름에 따라 다를 수 있으며 최소값은 71).

이제 우리 앱이 v-model 를 100번 사용한다고 상상해 보세요. 대략 8.5kb 덜 빌드된 JS가 될 것입니다.

그러나 가격은 가독성입니다. v-model 를 사용할 수만 있다면 누가 이벤트 리스너와 바인딩으로 템플릿을 확장하고 싶습니까? 또한 이로 인해 발생할 수 있는 성가심의 양에 비해 이득이 최소화됩니다. 그래서, 우리는 아마 이것을 하지 말아야 합니다.

☕ I also want to shout out to Andras for supporting me via buymeacoffee! I enjoyed the coffee in the sun on my favorite bench - Just the right thing to relax after a long day. Thank you!

내가 이 글을 쓰면서 즐거웠던 만큼 여러분도 이 글을 즐겁게 읽으셨기를 바랍니다! 그렇다면 ❤️ 또는 🦄를 남겨주세요! 나는 여가 시간에 기술 기사를 쓰고 가끔씩 커피를 마시는 것을 좋아합니다.

내 노력을 지원하고 싶다면 you can offer me a coffee ☕ 또는 ! Paypal을 통해 저를 직접 지원할 수도 있습니다!