Tree shaking css using angular-cli build / schemantics


Tree shaking css using angular-cli build / schemantics



I am on an angular-cli project. I am facing an issue with the css. This is somewhat a non-code question and deviates from stackoverflow needs of putting code. But hopefully it will not be marked down for closure. Here is the background:



I have a lot of unnecessary css lingering around. I need treeshaking for the unnecessary css during the build process. Is there one that you can help me with.



Here is the background of what is happening:



Options:



I see manual tree shaking is an issue. So I saw there are a few css treeshakers around but since angular cli works with multiple components, I see a need of cli integration of the css tree shaker. I could not find one for cli to merge with build.



Questions: Anyone has suggestion on how to integrate or is there a css-tree shaker community project? I have not worked with schmatics.





What exactly do you mean by treeshaking unnecessary CSS? Could you provide a generic example?
– Andrei Gheorghiu
Jul 1 at 2:41






Like treesharking unused variables and imports using cli
– Gary
Jul 1 at 5:31






Here is someones actual ground work. github.com/simlrh/dead-css-loader let me check what is in store until you reply.
– Gary
Jul 1 at 8:24





Practically, it's neither possible nor practical. You'd need to compile every single variant of the page and it would fail anyway considering CSS preprocessors and ng-class directive. A good CSS shaker would need to understand and apply specificity. Besides, the gain would not be worth the effort. The only hiccup of CSS is loading, not processing. Also, have you conducted any comparison tests of actual improvement? Just repeat same rule 1k times and see if there's any significant difference in load and parse.
– Andrei Gheorghiu
Jul 1 at 9:47


ng-class





Yes, this is what I too was thinking. I was looking at a css cleaner blog. I deciphered you can match css classes in html and ngClass and ngStyle. However, I realised a pure js with css code out of detection will mess it up as well. What options are available if I use a constraint of css classes only in html, ngclass, ngstyle? Would I be able to identify them using the new renderer? Let's ignore the fact that we will ever use a preprocessor.
– Gary
Jul 1 at 12:14










By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

-

Popular posts from this blog

How to input without newline? (Python)

How to input without newline? (Python) I am trying to create a simple file editor in Python via the console (called PyCons). Here is my current program: def PyCons(f): file = open(f, "r") appe = open(f, "a") print("n=====nPyCons Editor, v1.2nPython 3.6.1n") global i i = 0 for line in file: i += 1 print(" {}| ".format(i) + line, end='') for k in range(10000000000000): print("n {}| ".format(i+1), end='') inp = input("") if inp == "@PyCons.save()": print("n=====") break else: i += 1 appe.write("n" + inp) I used the end method to make sure that the existing code in the file was printed properly in its line format, but the input function does not have an end attribute. So, when I go to enter code in the editor: end input end PyCons("magic.html") ... ===== PyCons Editor, v1.2 Python 3.6.1 1| <p>Hello!...
Read more

C++ thread error: no type named ‘type’ MINGW

C++ thread error: no type named ‘type’ MINGW I'm currently doing a project for my operational systems class and I have to make a program to find prime numbers to run in threads. So I did this: #include <iostream> #include <cmath> #include <thread> #define THREADNUMBER 100 using namespace std; int CONTADOR = 0; int CONTADORTHREADEXECUTADA = 0; int primeRange(int v1, int v2) { int a, limit; bool isprime; for (int i = v1; i <= v2; i++) { if (i % 2 != 0 && i % 3 != 0) { isprime = true; limit = i / 2; if(i == 1) isprime =false; limit = (int)sqrt(i); //General case for(a=2; a <= limit; a++){ if(i % i == 0 && i != 2){ isprime = false; break; } } if (isprime) { CONTADOR++; } } } CONTADORTHREADEXECUTADA++; return 1; } int main(int argc, char *argv[ ] ) { int number1 = atoi(argv[1]); int num...
Read more

Analog for TagView in flutter

Image
Analog for TagView in flutter I want to have UI like this: With native Android it can be done with libraries like https://github.com/whilu/AndroidTagView, how can it be done with flutter? 2 Answers 2 you can make the same UI by combining the Wrap and Chip widget as @wasyl montioned . but this is a full example about what you need Wrap Chip Notes : spacing deleteIcon avatar Chip Shape new Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[ new Wrap( children: <Widget>[ Chip( label: new Text("Java"), onDeleted: () {}, labelPadding: EdgeInsets.all(2.0), deleteIcon: Icon(Icons.clear), ), Chip( label: new Text("C++"), onDeleted: () {}, labelPadding: EdgeInse...
Read more