How to avoid duplicate styles in angular 2 bundled CSS?

Viewed 347

I was checking bundle sizes in a production build generated by a ng-cli based project. There are a couple of third-party NPM packages defining some angular 2 components and in their CSS styles they embed some data-URI encoded text. Just for completeness, in one case it's part of a custom @font-face{src:url(data:application/octet-stream;..., in another is part of a background-image:url(data:image/png;....

It occurred to me to notice that those large bits of styles, and actually entire chunks of CSS, are repeated twice in their bundles.

Q1: Is there a way to avoid repeating such CSS parts twice? Is that due to the way the library is being bundled by angular? Or due to the way the library is authored/built/...?

Q2: What are the guidelines for angular 2 component library authors on how to ship fonts and image assets? This is in case there's a better way and I can work with authors to change things.

TA

0 Answers
Related