☠️
Vue.js で production では呼ばれないと信じていたクソ重い処理がずっと呼ばれてた件
下の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