Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can angular-cli remove unused css?

so far the smallest bundle I can create with angular cli is by running

ng build --aot true -prod

I was wondering if the build process also removes unused css classes e.g. from bootstrap?

If not how can I add libraries like purifycss to it?

EDIT April 2018

I still did not find any satisfying solution to his problem, especially one that is compatible with the lazy loading modules with angular...

Cheers

like image 776
Han Che Avatar asked Oct 30 '16 16:10

Han Che


People also ask

Should I remove unused CSS?

Why should you remove unused CSS? # Since CSS defines how content in an HTML document gets displayed, the user's browser must download and parse all external CSS files before it can start rendering content. Consequently, the more CSS a web page contains, the longer users must wait to see anything on their screens.

How do I remove unused asset cleanup CSS?

Upon activation, you need to visit the Settings » WP Rocket page and switch to the 'File Optimization' tab. Next, you need to scroll down to the CSS Files section and then check the box next to the 'Remove Unused CSS (Beta)' option.

Does unused CSS affect performance?

Reducing unused CSS rules can reduce render-blocking behaviour to speed up your page load and improve your visitors' page experience. By default, CSS files are considered render-blocking as they delay First Paint until the browser has finished executing them.


2 Answers

I did some research recently about this, but I could not find any really safe way of how to remove unused CSS. However I came across some tools which would help you detect dead-code in VS Code. There is an extention which is not perfect but looks promising. Also I did some investigation of how to remove unused Angular Material CSS (if you use it) and created a video about it. You can check this out here.

But at least now (in 2020) there is no any reliable way to achieve what you want and see also an answer from Angular Core Team member about this topic

like image 55
Dmytro Mezhenskyi Avatar answered Sep 16 '22 14:09

Dmytro Mezhenskyi


module.export={   plugins: [     new ExtractTextPlugin('[name].[contenthash].css'),     // Make sure this is after ExtractTextPlugin!     new PurifyCSSPlugin({       // Give paths to parse for rules. These should be absolute!       paths: glob.sync(path.join(__dirname, 'app/*.html')),     })   ]  }; 

install purifycss webpack first

like image 20
Akanimo Avatar answered Sep 16 '22 14:09

Akanimo