Angular-cli: Images not getting compressed

[a5hik]

angular-cli: 1.0.0-beta.18 node: 6.2.1 os: darwin x64

I do have a .png file in assets folder, and I refer in my CSS as background: url(/../../assets/images/Logo_3d.png) no-repeat; as an inline style.

and my webpack output show no png package chunk, So I guess it would be bundled as part of styles chunk.

Asset Size Chunks Chunk Names inline.js 1.47 kB 3 [emitted] inline 674f50d287a8c48dc19ba404d20fe713.eot 166 kB [emitted] b06871f281fee6b241d60582ae9369b9.ttf 166 kB [emitted] fee66e712a8a08eef5805a46892932ad.woff 98 kB [emitted] af7ae505a9eed503f8b8e6982036873e.woff2 77.2 kB [emitted] main.0b7da689dc574a32e9bf.bundle.js 2.91 MB 0, 3 [emitted] main styles.773d32919e284cc33328.bundle.js 284 kB 1, 3 [emitted] styles scripts.85878e10a4d6158213d7.bundle.js 10.2 kB 2, 3 [emitted] scripts 912ec66d7572ff821749319396470bde.svg 444 kB [emitted] main.0b7da689dc574a32e9bf.bundle.map 18.7 MB 0, 3 [emitted] main styles.773d32919e284cc33328.bundle.map 622 kB 1, 3 [emitted] styles scripts.85878e10a4d6158213d7.bundle.map 23.3 kB 2, 3 [emitted] scripts inline.d41d8cd98f00b204e980.bundle.map 13.5 kB 3 [emitted] inline styles.773d32919e284cc33328.bundle.js.gz 40.5 kB [emitted] main.0b7da689dc574a32e9bf.bundle.js.gz 663 kB [emitted] index.html 615 bytes [emitted]

But when I access my site by running in prod mode. ng serve --prod I still see the image rendered in original size of 420kb.

Doesn't the webpack take care of image compression? May be is this Intentional?

[deebloo]

I don't believe the cli handles optimizing images for you

[filipesilva]

We do not optimize images currently, no. Anything copied over via the assets array isn't preprocessed, just copied.

[a5hik]

But then what these chunks are all about?

912ec66d7572ff821749319396470bde.svg 444 kB [emitted]
b06871f281fee6b241d60582ae9369b9.ttf 166 kB [emitted] fee66e712a8a08eef5805a46892932ad.woff 98 kB [emitted] af7ae505a9eed503f8b8e6982036873e.woff2 77.2 kB [emitted]

[filipesilva]

Those are from stuff referenced in the styles array or stylesUrl in components.

[xtreemrage]

Would love to have my images compressed with a production build

[anodal88]

@filipesilva i want to ask you something about angular-cli, I am new with angular-cli and i remember when i was working with angular2+systemjs that i could load programmatically some modules lazy with something like this:
import { SystemJsNgModuleLoader, NgModuleFactory } from '@angular/core';

constructor(private loader: SystemJsNgModuleLoader) { }
//inside of ngOnInit
this.loader.load('app/Components/x/x.module#XModule').then((factory: NgModuleFactory) => {
console.log(factory);
});

Do you know if there is a method to do something similar with angular-cli ?

Sorry for the question in this post but i don't know where is the proper place to post my question, thanks in advance.

[filipesilva]

@anodal88 not quite, but there's a high-level discussion issue about it in https://github.com/angular/angular-cli/issues/4541.

[clydin]

Closing as decisions about image compression/optimization are extremely project specific and there are a veritable cornucopia of tools available to do so based on the specific needs of the project.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}