add svgo and imageoptim (codesandbox#2440)

* add svgo and imageoptim

* cleanup

Author: SaraVieira

packages/app/config/webpack.common.js

@@ -1,3 +1,4 @@
+/* eslint-disable global-require */
 const webpack = require('webpack');
 const path = require('path');
 const fs = require('fs');
@@ -336,7 +337,19 @@ module.exports = {
       // When you `import` an asset, you get its (virtual) filename.
       // In production, they would get copied to the `build` folder.
       {
-        test: /\.(ico|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
+        test: /\.(svg)(\?.*)?$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: 'static/media/[name].[hash:8].[ext]',
+            },
+          },
+          { loader: 'svgo-loader' },
+        ],
+      },
+      {
+        test: /\.(ico|jpg|png|gif|eot|otf|webp|ttf|woff|woff2)(\?.*)?$/,
         exclude: [/\/favicon.ico$/],
         loader: 'file-loader',
         options: {

packages/app/config/webpack.prod.js

@@ -1,6 +1,9 @@
-const SentryWebpackPlugin = require('@sentry/webpack-plugin');
+/* eslint-disable global-require */
+
+// const SentryWebpackPlugin = require('@sentry/webpack-plugin');
 const merge = require('webpack-merge');
 const webpack = require('webpack');
+const ImageminPlugin = require('imagemin-webpack-plugin').default;
 const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
 const TerserJSPlugin = require('terser-webpack-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
@@ -10,15 +13,15 @@ const normalizeName = require('webpack/lib/optimize/SplitChunksPlugin')
 const ManifestPlugin = require('webpack-manifest-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const VERSION = require('@codesandbox/common/lib/version').default;
-const childProcess = require('child_process');
+// const childProcess = require('child_process');
 const commonConfig = require('./webpack.common');
 
 const publicPath = '/';
-const isMaster =
-  childProcess
-    .execSync(`git branch | grep \\* | cut -d ' ' -f2`)
-    .toString()
-    .trim() === 'master';
+// const isMaster =
+//   childProcess
+//     .execSync(`git branch | grep \\* | cut -d ' ' -f2`)
+//     .toString()
+//     .trim() === 'master';
 
 const normalize = normalizeName({ name: true, automaticNameDelimiter: '~' });
 
@@ -128,6 +131,7 @@ module.exports = merge(commonConfig, {
           // https://github.com/facebookincubator/create-react-app/issues/2612
           return;
         }
+        // eslint-disable-next-line no-console
         console.log(message);
       },
       minify: true,
@@ -219,6 +223,7 @@ module.exports = merge(commonConfig, {
           // https://github.com/facebookincubator/create-react-app/issues/2612
           return;
         }
+        // eslint-disable-next-line no-console
         console.log(message);
       },
       minify: true,
@@ -349,6 +354,11 @@ module.exports = merge(commonConfig, {
         to: 'public/sse-hooks',
       },
     ]),
+    new ImageminPlugin({
+      pngquant: {
+        quality: '95-100',
+      },
+    }),
     // isMaster &&
     //   new SentryWebpackPlugin({
     //     include: 'src',

packages/app/package.json

@@ -267,6 +267,7 @@
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^4.0.0-beta.1",
     "http-proxy-middleware": "^0.17.3",
+    "imagemin-webpack-plugin": "^2.4.2",
     "jest": "^24.8.0",
     "jest-image-snapshot": "^1.0.1",
     "jest-junit": "^3.4.1",
@@ -293,6 +294,8 @@
     "selenium-webdriver": "^4.0.0-alpha.1",
     "strip-ansi": "3.0.1",
     "style-loader": "^0.21.0",
+    "svgo": "^1.3.0",
+    "svgo-loader": "^2.2.1",
     "sw-precache-webpack-plugin": "^0.11.5",
     "terser": "^4.1.4",
     "terser-webpack-plugin": "^1.4.1",