diff --git a/package.json b/package.json index 03b832c..ab6c9b7 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,12 @@ }, "devDependencies": { "eslint": "^7.32.0", + "image-minimizer-webpack-plugin": "^3.3.0", + "imagemin": "^8.0.1", + "imagemin-gifsicle": "^7.0.0", + "imagemin-jpegtran": "^7.0.0", + "imagemin-optipng": "^8.0.0", + "imagemin-svgo": "^10.0.1", "jest": "^26.6.3", "sass": "^1.51.0", "typescript": "^4.6.3", diff --git a/src/plugins.js b/src/plugins.js index 094a0da..aeba2f1 100644 --- a/src/plugins.js +++ b/src/plugins.js @@ -9,6 +9,7 @@ const RemoveEmptyScriptsPlugin = require( 'webpack-remove-empty-scripts' ); const SimpleBuildReportPlugin = require( 'simple-build-report-webpack-plugin' ); const TerserPlugin = require( 'terser-webpack-plugin' ); const CssMinimizerPlugin = require( 'css-minimizer-webpack-plugin' ); +const ImageMinimizerPlugin = require( 'image-minimizer-webpack-plugin' ); const { applyFilters } = require( './helpers/filters' ); @@ -169,6 +170,44 @@ module.exports = { */ cssMinimizer: ( options = {} ) => new CssMinimizerPlugin( options ), + /** + * Image Minimizer Plugin. + * + * @returns {ImageMinimizerPlugin} + */ + imageMinimizer: () => { + // Svgo configuration. + // Reference: https://github.com/svg/svgo#configuration + // Example: https://github.com/svg/svgo#default-preset + const svgoConfig = { + plugins: [ + { + name: 'preset-default', + params: { + overrides: { + 'removeViewBox': false, + }, + }, + }, + ], + }; + + return new ImageMinimizerPlugin( { + minimizer: { + implementation: ImageMinimizerPlugin.imageminMinify, + options: { + plugins: [ + [ 'gifsicle', { interlaced: true } ], + [ 'jpegtran', { progressive: true } ], + [ 'optipng', { optimizationLevel: 5 } ], + [ 'svgo', svgoConfig ], + ], + }, + }, + } ); + + }, + /** * Instantiate a SimpleBuildReportPlugin to render build output in a human- * oriented fashion. diff --git a/src/presets.js b/src/presets.js index 75386f9..5848734 100644 --- a/src/presets.js +++ b/src/presets.js @@ -374,6 +374,7 @@ const production = ( config = {} ) => { minimizer: [ plugins.terser(), plugins.cssMinimizer(), + plugins.imageMinimizer(), ], emitOnErrors: false, },