vue-bem-cn
vue-bem-cn copied to clipboard
c01nd01r
Performance
We're binding our classes to a b() method. Doesn't that mean that the b() method gets processed everytime the template re-renders?
What is the performance hit?
It is just string concatenation. Simple and quick operation with a small number of objects. I don't think that there may be some performance problems.
Sure, but even so, calling a bunch of b() every time the template re-renders, might be impactful. It might not scale very well.
So far we did not have critical performance issues. But I guess there is a small pay-off especially when using b() only with an element string. Which makes sense if you use this plugin. Why should you write classes by yourself. I can imagine that it could make quite a positive difference if :class="b('element')" would just become class="component-element" during build on a greater scale. But I was not able to see how this could be done. I guess you would have to hook into vue-loader to replace this on build. According to the docs it would be possible to remove a directive from the build though: https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#options
I did test if it would be possible to create a cache based on a stringified configuration object on each call. But looks like JSON.stringify() is slower than the concatenation that is happening inside bemNames().
I was looking at this lib and has the same concern. Maybe someone can put a simple demo together and measure the perf?
In the meantime I created a new plugin for us, which is able to reduce the amount of recalculation and also caches hyphenation. See https://www.npmjs.com/package/@verstaerker/vue-bem
Unfortunately (for me) I have to admit, that additional test showed that, while my internal code performed faster, the overall rendering time eventually is higher (we are talking about higher two digit milliseconds here). As I currently see it this is due the fact how Vue handles directives. So far I was not able to get it down to the speed that the vue-bem-cn plugin offers...
I actually wanted to also post some testing results, but I was not able to make an extensive comparison yet.