Three js No image Material : WARNING in asset size limit - npm

Question

I'm working on a threeJs project and I got this 3 errors on npm run build :
1
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
assets/images/67a542cb789140671d2491d8df477a72.png (4.8 MiB)
assets/images/6376a942e1ef27fea4331307af793e1d.png (658 KiB)
bundle.4cab645ddfe7a1d96c4e.js (3.19 MiB)
2
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
main (3.19 MiB)
main.css
bundle.4cab645ddfe7a1d96c4e.js
3
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
Here is the code :
import './style.css'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import * as dat from 'dat.gui'
import map from './texture/earth.jpg'
import mapdump from './texture/earthbump.jpg'
import clouds from './texture/earthCloud.png'
import galaxy from './texture/galaxy.png'
// global variables
let scene;
let camera;
let renderer;
const canvas = document.querySelector(".webgl");
...
// renderer setup
renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: true,
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio ? window.devicePixelRatio : 1);
renderer.autoClear = false;
renderer.setClearColor(0x000000, 0.0);
...
// earth
const earthGeometry = new THREE.SphereGeometry(1, 32, 32);
const earthMaterial = new THREE.MeshPhongMaterial({
map: new THREE.TextureLoader().load(map),
bumpMap: new THREE.TextureLoader().load(mapdump),
roughness: 1,
metalness: 0,
bumpScale: 0.3,
});
const earthMesh = new THREE.Mesh(earthGeometry, earthMaterial);
scene.add(earthMesh);
// cloud
const cloudGeometry = new THREE.SphereGeometry(1.02, 30, 30);
const cloudMetarial = new THREE.MeshPhongMaterial({
map: new THREE.TextureLoader().load(clouds),
transparent: true,
});
const cloudMesh = new THREE.Mesh(cloudGeometry, cloudMetarial);
scene.add(cloudMesh);
...
npm run dev
how it shoud be
dist
how it is on dist
Link on github
Github