Tuesday, 11 January 2022

Can you compress angular image assets on build?

What I want

I have very big images in my assets, which slows down the site by a lot for slower networks. (you can read more about the topic on this lighthouse linked page)

  • I would like to compress them at build time (ng build --prod).
  • For local development, it is irrelevant (ng serve).
  • Optimally I would like to generate multiple versions for different screen sizes (example.jpg → should become: example_x265.jpg, example_x128.jpg, ...)

What I have tried

The most promising guide I have found for that is this one here, which describes how to use the imagemin package in combination with the ngx-build-plus package.

Unfortunately, after following the tutorial, I get the following error:

[error] TypeError: Cannot assign to read only property 'main.977fe6373cfd108d.js' of object '#<Object>'
    at ImageminPlugin._callee2$ (/.../node_modules/imagemin-webpack-plugin/dist/index.js:264:48)
    at tryCatch (/.../node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:62:40)
     // ...

Is there any way to compress asset images on build?

Angular Version: 13.1.0

Note: I do not want to know how to upload images to third party storage solutions.
I specifically want to create a compressed version of my static assets on build time.



from Can you compress angular image assets on build?

No comments:

Post a Comment