feat!: reduce bundle size webpack improvement (#606)

* feat: reduce bundle size webpack improvement

no css
no svg
no fonts

* chore: remove checks

Author: juanpicado

package.json

@@ -150,7 +150,6 @@
     "stylelint-webpack-plugin": "^2.1.1",
     "supertest": "4.0.2",
     "terser-webpack-plugin": "^5.0.3",
-    "typeface-roboto": "0.0.75",
     "typescript": "3.9.6",
     "url-loader": "^4.1.1",
     "validator": "13.1.1",
@@ -180,18 +179,6 @@
     {
       "path": "./static/main.*.js",
       "maxSize": "400 kB"
-    },
-    {
-      "path": "./static/*.svg",
-      "maxSize": "1.3 kB"
-    },
-    {
-      "path": "./static/*.png",
-      "maxSize": "15 kB"
-    },
-    {
-      "path": "./static/fonts/*.{woff,woff2}",
-      "maxSize": "20 kB"
     }
   ],
   "scripts": {

src/design-tokens/StyleBaseline.tsx

@@ -1,7 +1,6 @@
 import CssBaseline from '@material-ui/core/CssBaseline';
 import React from 'react';
 import 'normalize.css';
-import 'typeface-roboto/index.css';
 
 import ResetCSS from './ResetStyles';
 

src/design-tokens/theme.ts

@@ -84,7 +84,7 @@ export const getTheme = (themeMode: ThemeMode) => {
   const palette = themeModes[themeMode];
   return createMuiTheme({
     typography: {
-      fontFamily: 'inherit',
+      fontFamily: ['-apple-system', 'BlinkMacSystemFont', '"Helvetica Neue"', 'Arial', 'sans-serif'].join(','),
     },
     palette: {
       type: themeMode,

tools/webpack.config.js

@@ -47,15 +47,6 @@ module.exports = {
 
   module: {
     rules: [
-      /* Pre loader */
-      {
-        enforce: 'pre',
-        test: /\.jsx?$/,
-        exclude: /node_modules/,
-        use: 'eslint-loader',
-      },
-
-      /* Normal loader */
       {
         test: /\.jsx?$/,
         exclude: /node_modules/,
@@ -69,31 +60,11 @@ module.exports = {
       },
       {
         test: /\.(jpe?g|png|gif|svg)$/,
-        use: [
-          {
-            loader: 'file-loader',
-          },
-        ],
-      },
-      {
-        test: /\.(woff|woff2|eot|ttf|otf)$/,
-        loader: 'url-loader',
-        options: {
-          name: '[name].[ext]',
-          outputPath: 'fonts',
-          limit: 50,
-        },
+        type: 'asset/inline',
       },
       {
         test: /\.css$/,
-        use: [
-          {
-            loader: 'style-loader',
-          },
-          {
-            loader: 'css-loader',
-          },
-        ],
+        type: 'asset/inline',
       },
       /* Typescript loader */
       {

yarn.lock

@@ -3910,7 +3910,6 @@ __metadata:
     stylelint-webpack-plugin: ^2.1.1
     supertest: 4.0.2
     terser-webpack-plugin: ^5.0.3
-    typeface-roboto: 0.0.75
     typescript: 3.9.6
     url-loader: ^4.1.1
     validator: 13.1.1
@@ -19451,13 +19450,6 @@ resolve@~1.7.1:
   languageName: node
   linkType: hard
 
-"typeface-roboto@npm:0.0.75":
-  version: 0.0.75
-  resolution: "typeface-roboto@npm:0.0.75"
-  checksum: ee56f5cc5720b2c15ee851652f3584a53d56ec2d1448dc757e0097808071f4d7d6843e66e343483a92e94d7b3f3a9436153517818834a367977bea888fc6d429
-  languageName: node
-  linkType: hard
-
 typescript@3.9.6:
   version: 3.9.6
   resolution: "typescript@npm:3.9.6"