I routinely use a CSS Pure tool to look through all the CSS files that get included in a typical Bootstrap project, for instance.
I gives me back one file CSS file, I choose the minified option. This one CSS file eliminates tons of CSS properties in a bunch of Wappler and Bootstrap files.
https://mywebsite.com/dmxAppConnect/dmxDatePicker/daterangepicker.min.css
before: 7.03 KB
after: 705.00 B
style properties used on the page: 9.79%
unused style properties: 90.21%
or
https://mywebsite.com/bootstrap/5/cerulean/bootstrap.min.css
before: 162.60 KB
after: 50.70 KB
used: 31.18%
unused: 68.82%
or
before: 58.19 KB
after: 2.34 KB
used: 4.02%
unused fontawesome code: 95.98%
another example – when I simply want a date input to just pick a date from a calendar Wappler insists on writing this file when my page is saved. Yet, the report I get back on that page is that nothing in the CSS in dmxDatePicker.css is used.
https://mywebsite.com/dmxAppConnect/dmxDatePicker/dmxDatePicker.css
unused: 100%
So, I have to edit the finished Wappler pages outside of Wappler and know that I can’t use Wappler to edit them in the future. If I import that page back into Wappler it will change the code to push all of the CSS code I removed back onto the page.
It would help eliminate some steps in final code preparation for uploading a project if there was a Protect Code Option – perhaps set up in the Target tabs.
Target: Protect Developer Code (for instance)
In this target Wappler does not impose mandatory DMX styles-update-on-save.
Page editing while in the Protect Code Target mode allows hands-off modifications by the developer that can be updated here with no changes when saved. And FTP upload is enabled and project upload.
Last updated: