feat: enhance image loading performance by adding fetchPriority and loading attributes in multiple components, and update MUI icons chunking in webpack configuration

src/components/Images.js

@@ -132,6 +132,8 @@ class Images extends Component {
               component="img"
               height="400"
               image={getImagePath(this.props.pictureList)}
+              fetchPriority="high"
+              loading="eager"
               sx={{ 
                 objectFit: 'contain',
                 cursor: 'pointer',
@@ -170,6 +172,8 @@ class Images extends Component {
           <CardMedia 
             component="img" 
             height="400" 
+            fetchPriority="high"
+            loading="eager"
             sx={{ 
               objectFit: 'contain',
               cursor: 'pointer',

src/components/PhotoUpload.js

@@ -8,10 +8,8 @@ import {
   Grid,
   Alert
 } from '@mui/material';
-import {
-  Delete,
-  CloudUpload
-} from '@mui/icons-material';
+import Delete from '@mui/icons-material/Delete';
+import CloudUpload from '@mui/icons-material/CloudUpload';
 
 class PhotoUpload extends Component {
   constructor(props) {

src/components/Product.js

@@ -306,6 +306,8 @@ class Product extends Component {
                 height={ window.innerWidth < 600 ? "240" : "180" }
                 image="/assets/images/nopicture.jpg"
                 alt={name}
+                fetchPriority={this.props.priority === 'high' ? 'high' : 'auto'}
+                loading={this.props.priority === 'high' ? 'eager' : 'lazy'}
                 sx={{ 
                   objectFit: 'contain', 
                   borderTopLeftRadius: '8px', 
@@ -319,6 +321,8 @@ class Product extends Component {
                   height={ window.innerWidth < 600 ? "240" : "180" }
                   image={this.state.image}
                   alt={name}
+                  fetchPriority={this.props.priority === 'high' ? 'high' : 'auto'}
+                  loading={this.props.priority === 'high' ? 'eager' : 'lazy'}
                   sx={{ 
                     objectFit: 'contain', 
                     borderTopLeftRadius: '8px', 

src/components/ProductImage.js

@@ -31,6 +31,8 @@ const ProductImage = ({
           height="400"
           image="/assets/images/nopicture.jpg"
           alt={product.name}
+          fetchPriority="high"
+          loading="eager"
           sx={{ objectFit: "cover" }}
         />
       )}

src/components/ProductList.js

@@ -476,6 +476,7 @@ class ProductList extends Component {
                 pictureList={product.pictureList}
                 availableSupplier={product.availableSupplier}
                 komponenten={product.komponenten}
+                priority={index < 6 ? 'high' : 'auto'}
                 t={this.props.t}
               />
             </Grid>

src/components/profile/SettingsTab.js

@@ -11,7 +11,7 @@ import {
   IconButton,
   Snackbar
 } from '@mui/material';
-import { ContentCopy } from '@mui/icons-material';
+import ContentCopy from '@mui/icons-material/ContentCopy';
 import { withI18n } from '../../i18n/withTranslation.js';
 
 class SettingsTab extends Component {

src/pages/GrowTentKonfigurator.js

@@ -11,9 +11,7 @@ import {
   ListItemText,
   ListItemSecondaryAction,
 } from '@mui/material';
-import {
-  ShoppingCart as ShoppingCartIcon,
-} from '@mui/icons-material';
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import { TentShapeSelector, ProductSelector, ExtrasSelector } from '../components/configurator/index.js';
 import { tentShapes, tentSizes, lightTypes, ventilationTypes, extras } from '../data/configuratorData.js';