☠️

Vue.js で production では呼ばれないと信じていたクソ重い処理がずっと呼ばれてた件

2022/03/25に公開

下のHTMLをブラウザで開くと alert('クソ重い処理') は呼ばれるだろうか？

<html>
  <head>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <development-only>{{debug_info}}</development-only>
    </div>
    <script>
      new Vue({
        el: "#app",
        components: {
          "development-only": {
            template: `<div v-if="false"><slot></slot></div>`,
          },
        },
        computed: {
          debug_info() {
            alert("クソ重い処理")
          },
        },
      })
    </script>
  </body>
</html>

タイトルに書いちゃってるけど答えは呼ばれる。development-only コンポーネントではそのなかにクソ重い大量のデバッグ表示を slot で表示するようにしていて production ではそれらをスキップするためコンポーネント内直下で v-if="false" となるようにし、サイトを長年運用していた。あるとき不安になってまさかなと思い、恐る恐る試したら呼ばれたのである。

Discussion