Subscribe on changes!

Template compiler: de-duplication of identical hoisted content

avatar
2-5
Aug 10th 2022

What problem does this feature solve?

Looking through the compiled output code of my app I noticed a lot of identical hoisted static content, like in this reproduction:

const _hoisted_1 = { class: "text-end" }
const _hoisted_2 = { class: "text-end" }
const _hoisted_3 = { class: "text-end" }
const _hoisted_4 = { class: "text-end" }
const _hoisted_5 = { class: "text-end" }
const _hoisted_6 = { class: "text-end" }

https://sfc.vuejs.org/#eNqNkstuwyAQRX9lNKtWis3eciL1P9jYdNw6Cg8BTv0Q/16wKxq3UuQdHA5XMwMLvhlT3gfCCmtP0twaTxeuAGoD4tY4d+boafQFqXeOl2WBBkKomXkutUckcUQaj0jTEWnOUs0eWo1bJ2xvPDjyw5bRS6OthwUsdRCgs1oCxzgmjukCgNDK+TiKczJeODYcX395m3m74yJzseNj5uOOT5lPOz5nPq+8ZlsHsXY84VZ8IRtTXp1W8WWXdJX/HDiOFawksbWnKi4+vTeuYsx1Iv2Hqyu1/WBxVdpB+V5SSU4WrdVfjmwM5nh6yGAR3skWNk6bLNlnmX/Uf7kpNnAVMHwDUCTfLw==

What does the proposed API look like?

While it's not a huge deal, it seems like an easy problem to fix, the template compiler just needs to keep a cache of previously emitted hoisted content. Unless there is a reason to not reuse hoisted content.