0

My future web app is a part of the firmware. The firmware is supposed to be built for a lot of devices. For each of them there is a profile with configuration parameters. I need to clean up app's html templates from unnecessary features. The reason i want to do it at build time is the size of firmware. So, i want to replace all v-if statements that use profile object with constant values. For example, this html

<div v-if="profile.feature1"></div>

is supposed to be replaced with this:

<div v-if="false"></div>

After this the whole div tag will be removed as dead. As far as I understand, I can do a similar thing with js by writing a plugin for rollup, but with html... no idea.

In previous version of this web app i used gulp plugin as a part of html processing pipeline.

Which options do i have if i migrate to quasar?

I googled the subject but with no success.

PS: I figured out that i have no need to write rollup plugin in case of js. According to docs:

When compiling your website/app, if () branches depending on process.env are evaluated, and if the expression is false, they get stripped out of the file.

That's a good news. But i still don't know how to access process.env in templates and would it be stripped like js.

Update:

I found another way to preprocess sources. There is rawDefine property in quasar.config.js. AFAIK it's based on the same define vite's feature. It's allows me to use SOME_FEATURE constants in source code directly without process.env. It didn't give the answer for templates by itself, but i looked at what came to define plugin as input and saw _ctx.SOME_FEATURE. So, now i can add _ctx. prefixed version of every constant in rawDefine to make it replaced by define plugin.

The problems that i still have:

  1. I don't know how reliable it is. It looks like a workaround.
  2. The tag with v-if="SOME_FEATURE" is stripped, but if the tag refers to a component and that component isn't used anywhere else it's still here. On other hand, if i replace v-if="SOME_FEATURE" to v-if="false" then both (the tag of the component and the component itself) are removed.
Serge
  • 21
  • 3
  • You could just give `profile.feature1` a default value of false. You can check with your browser developer tools that the HTML inside is not there. – Peter Krebs Jun 21 '23 at 13:03
  • Yes. In the browser it won't be there, but i need it not to be there in the bundle. In other words I talk about the tree shaking. – Serge Jun 21 '23 at 18:12
  • Oh right it's meant as a dynamic tree shaking. Maybe [check if dynamic component exists](https://stackoverflow.com/questions/69897185/check-if-dynamic-component-exists)? – Peter Krebs Jun 22 '23 at 08:49
  • Dynamic components are not the choice in my case, unfortunately. I have a whole lot of small features (usually turning into several fields on a page) which originated from small differences in devices (for instance now we have about 300 profile constants) and customer's requirements as well. Though each separate difference is small, as a rule, but altogether they end up taking considerable space on the flash. – Serge Jun 22 '23 at 11:32

0 Answers0