😔

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

2022/03/25に公開約800字

下の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

ログインするとコメントできます