Add image optimization

packages/react-scripts/config/webpack.config.js

@@ -18,6 +18,7 @@ const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
 const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
@@ -232,7 +233,7 @@ module.exports = function (webpackEnv) {
     },
     optimization: {
       minimize: isEnvProduction,
-      minimizer: [
+      minimizer: minimizer: [
         // This is only used in production mode
         new TerserPlugin({
           terserOptions: {
@@ -275,6 +276,17 @@ module.exports = function (webpackEnv) {
         }),
         // This is only used in production mode
         new CssMinimizerPlugin(),
+        // This is only used in production mode
+        new ImageMinimizerPlugin({
+          minimizerOptions: {
+            plugins: [
+              'gifsicle',
+              'jpegtran',
+              'optipng',
+              'svgo',
+            ],
+          },
+        }),
       ],
     },
     resolve: {

packages/react-scripts/package.json

@@ -50,6 +50,11 @@
     "fs-extra": "^10.0.0",
     "html-webpack-plugin": "5.3.2",
     "identity-obj-proxy": "3.0.0",
+    "image-minimizer-webpack-plugin": "^2.2.0",
+    "imagemin-gifsicle": "^7.0.0",
+    "imagemin-jpegtran": "^7.0.0",
+    "imagemin-optipng": "^8.0.0",
+    "imagemin-svgo": "^9.0.0",
     "jest": "26.6.0",
     "jest-circus": "26.6.0",
     "jest-resolve": "26.6.0",

test/fixtures/webpack-image-optimization/index.test.js

@@ -0,0 +1,25 @@
+const testSetup = require('../__shared__/test-setup');
+
+const fs = require('fs-extra');
+const globby = require('globby');
+const path = require('path');
+
+test('optimizes in production', async () => {
+  const { fulfilled } = await testSetup.scripts.build();
+  expect(fulfilled).toBe(true);
+
+  const buildDir = path.join(testSetup.testDirectory, 'build');
+  const builtImageFile = path.join(
+    buildDir,
+    globby.sync('**/*.png', { cwd: buildDir }).pop()
+  );
+  const recievedBuf = fs.readFileSync(builtImageFile);
+
+  const expectedImageFile = path.join(
+    testSetup.templateDirectory,
+    './src/images/webpack-optimized.png'
+  );
+  const expectedBuf = fs.readFileSync(expectedImageFile);
+
+  expect(recievedBuf).toStrictEqual(expectedBuf);
+});

test/fixtures/webpack-image-optimization/package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "react": "latest",
+    "react-dom": "latest"
+  }
+}

test/fixtures/webpack-image-optimization/src/index.css

@@ -0,0 +1,5 @@
+#root {
+  width: 300px;
+  height: 300px;
+  background: url(./images/webpack-unoptimized.png) center/cover no-repeat;
+}

test/fixtures/webpack-image-optimization/src/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+
+ReactDOM.render(<div />, document.getElementById('root'));