feat(@angular/cli): add build flag --inline-asset-max-size Maximum size of asset to inline #8967
Conversation
…size of asset to be inlined
| If a resource is less than 10kb it will also be inlined. | ||
| If a resource is less than 10kb it will also be inlined by default. | ||
|
|
||
| By using flaf `--inline-asset-max-size` it's possible to define the max size of the |
| }, | ||
| { | ||
| // TODO: inline .cur if not supporting IE (use browserslist to check) | ||
| filter: (asset: any) => !asset.hash && !asset.absolutePath.endsWith('.cur'), |
There was a problem hiding this comment.
Instead of the extra function (which is breaking the eject command). Add a condition to the filter here.
Also the semantics of the option values should be changed. A maximum size of zero (0) means nothing should be inlined. Infinity would mean everything should be inlined.
| 'src/assets/small-id.svg': imgSvg | ||
| })) | ||
| .then(() => copyProjectAsset('images/spectrum.png', './assets/large.png')) | ||
| .then(() => ng('build', '--extract-css', '--inline-asset-max-size=-1', '--aot')) |
There was a problem hiding this comment.
Tests for inlining all resources and at an arbitrary non-default value would also be needed.
|
Closing this as infrastructure to more easily support this feature has been added since this PR's creation and a major refactoring of the build system in the next major version will provide a mechanism for the addition of features such as this. |
|
@clydin how would i go about this? |
|
Any news? Just want to inline all of my images without ejecting the config |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
6 participants
When building an Angular app with Angular CLI, resources in CSS, e.g. svg images, less than 10kb in size will be inlined.
This sounds like a good concept from the performance point of view, however, it may violate very strict Content Security Policies in some apps, which has to satisfy stricter security requirements: #8945
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src
Instead of ejecting webpack, this PR adds a new build flag
--inline-asset-max-sizethat instructs Angular CLI NOT to inline any assets, e.g. images, in CSS due to strict CSP requirements.--inline-asset-max-size- Maximum size (in Kb) of assets to be inlined