ImageminPlugin with CustomWeback in Angular doesn't work in production

Asked Apr 25 '20 at 14:00

Active Apr 25 '20 at 14:00

Viewed 296 times

// webpack.config.js
const ImageminPlugin = require('imagemin-webpack-plugin').default


module.exports = {
  plugins: [
    new ImageminPlugin({
      pngquant: {
        quality: '50' // unreasonably low value to see it works
      }
    })
  ]
}

// angular.json
"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.config.js"
      },
    }
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.config.js"
      },
    }
  }
}

This works fine in development but when I run the application in production:

"start:prod": "angular-http-server --path dist/event-io -p $PORT",
"build:prod": "ng build --prod --stats-json",

the image has its original size even though the plugin is actually loaded.

Is there a problem with order?

asked Apr 25 '20 at 14:00

Michal

4,952
8
30
63

I assume you build before you serve right? – MikeOne Apr 25 '20 at 14:52
Yes is that a bad thing? Shouldn't the build create `dist` folder with compressed images and and serve the compressed images? – Michal Apr 25 '20 at 14:57
No that is a good thing :-) It shows the order the other way around, hence the question. This should work fine - you’re not seeing any build errors? What happens if you do a build without —prod flag? – MikeOne Apr 25 '20 at 15:00
1

Oh wait.. shouldn’t you being using the .test with ImageminPlugin? You should give it a path or regex to tell it what to minify no? – MikeOne Apr 25 '20 at 15:03
1

That is a good point because my svgs stopped working. I will try that and let you know. :) – Michal Apr 25 '20 at 16:50
That didn't help but it fixed the problem with svgs. – Michal Apr 25 '20 at 16:56
Did you solve this problem? – MauriceNino Dec 20 '21 at 15:54
I don't think so. – Michal Dec 21 '21 at 17:15

ImageminPlugin with CustomWeback in Angular doesn't work in production

0 Answers0