reduce index bundle size

package.json

@@ -6,7 +6,7 @@
   "author": "Yeicor",
   "scripts": {
     "start": "parcel src/index.html",
-    "build": "yarn update-licenses && parcel build src/index.html --reporter @parcel/reporter-bundle-analyzer --detailed-report",
+    "build": "yarn update-licenses && parcel build src/index.html --reporter @parcel/reporter-bundle-analyzer --detailed-report --public-url ./",
     "update-licenses": "generate-license-file --input package.json --output assets/licenses.txt --overwrite"
   },
   "dependencies": {

src/misc/helpers.ts

@@ -1,5 +1,8 @@
 import {Document, TypedArray} from '@gltf-transform/core'
-import {Matrix4, Vector2, Vector3} from 'three'
+import {Vector2} from 'three/src/math/Vector2'
+import {Vector3} from 'three/src/math/Vector3'
+import {Box3} from 'three/src/math/Box3'
+import {Matrix4} from 'three/src/math/Matrix4'
 
 
 /** Exports the colors used for the axes, primary and secondary. They match the orientation gizmo. */
@@ -105,9 +108,9 @@ export function newGridPlane(doc: Document, size: Vector2, transform: Matrix4 =
         rawPositions.push(size.x / 2, y - divisionWidth / 2, 0);
         rawPositions.push(size.x / 2, y + divisionWidth / 2, 0);
         rawPositions.push(-size.x / 2, y + divisionWidth / 2, 0);
-        const baseIndex2 = (divisions+1 + i) * 4;
+        const baseIndex2 = (divisions + 1 + i) * 4;
         rawIndices.push(baseIndex2, baseIndex2 + 1, baseIndex2 + 2);
         rawIndices.push(baseIndex2, baseIndex2 + 2, baseIndex2 + 3);
     }
     buildSimpleGltf(doc, rawPositions, rawIndices, null, transform, '__helper_grid', WebGL2RenderingContext.TRIANGLES);
-}
+}

src/misc/scene.ts

@@ -2,7 +2,9 @@ import {Ref, ShallowRef} from 'vue';
 import {Document} from '@gltf-transform/core';
 import {extrasNameKey, extrasNameValueHelpers, mergeFinalize, mergePartial, removeModel, toBuffer} from "./gltf";
 import {newAxes, newGridBox} from "./helpers";
-import {Box3, Matrix4, Vector3} from 'three';
+import {Vector3} from 'three/src/math/Vector3'
+import {Box3} from 'three/src/math/Box3'
+import {Matrix4} from 'three/src/math/Matrix4'
 
 /** This class helps manage SceneManagerData. All methods are static to support reactivity... */
 export class SceneMgr {

src/models/Model.vue

@@ -25,8 +25,12 @@ import {
   mdiVectorRectangle
 } from '@mdi/js'
 import SvgIcon from '@jamescoyle/vue-icon';
-import {BackSide, Box3, Color, FrontSide, Mesh as TMesh, Plane, Vector3} from "three";
 import {SceneMgr} from "../misc/scene";
+import {BackSide, FrontSide} from "three/src/constants";
+import {Box3} from "three/src/math/Box3";
+import {Color} from "three/src/math/Color";
+import {Plane} from "three/src/math/Plane";
+import {Vector3} from "three/src/math/Vector3";
 
 const props = defineProps<{
   meshes: Array<Mesh>,
@@ -224,15 +228,15 @@ props.viewer.onElemReady((elem) => elem.addEventListener('load', onModelLoad))
       <v-btn-toggle v-model="enabledFeatures" multiple @click.stop color="surface-light">
         <v-btn icon>
           <v-tooltip activator="parent">Toggle Faces ({{ faceCount }})</v-tooltip>
-          <svg-icon type="mdi" :path="mdiRectangle"></svg-icon>
+          <svg-icon type="mdi" :path="mdiRectangle" :rotate="90"></svg-icon>
         </v-btn>
         <v-btn icon>
           <v-tooltip activator="parent">Toggle Edges ({{ edgeCount }})</v-tooltip>
-          <svg-icon type="mdi" :path="mdiRectangleOutline"></svg-icon>
+          <svg-icon type="mdi" :path="mdiRectangleOutline" :rotate="90"></svg-icon>
         </v-btn>
         <v-btn icon>
           <v-tooltip activator="parent">Toggle Vertices ({{ vertexCount }})</v-tooltip>
-          <svg-icon type="mdi" :path="mdiVectorRectangle"></svg-icon>
+          <svg-icon type="mdi" :path="mdiVectorRectangle" :rotate="90"></svg-icon>
         </v-btn>
       </v-btn-toggle>
       <div class="model-name">{{ modelName }}</div>

src/models/Models.vue

@@ -45,7 +45,8 @@ defineExpose({findModel})
 
 <template>
   <Loading v-if="!props.document"/>
-  <v-expansion-panels v-else v-for="meshes in meshesList(props.document)" :key="meshName(meshes[0])" v-model="expandedNames" multiple>
+  <v-expansion-panels v-else v-for="meshes in meshesList(props.document)" :key="meshName(meshes[0])"
+                      v-model="expandedNames" multiple>
     <model :meshes="meshes" :viewer="props.viewer" :document="props.document" @remove="onRemove(meshes[0])"/>
   </v-expansion-panels>
 </template>

src/shims.d.ts

@@ -1,6 +1,8 @@
 // Avoids typescript error when importing files
 declare module '*.vue'
+declare module '@jamescoyle/vue-icon'
 declare module 'three-orientation-gizmo/src/OrientationGizmo'
 declare module 'vuetify/lib/styles/main.sass'
 declare module '@mdi/font/css/materialdesignicons.css'
+declare module 'vuetify/lib/components'
 declare module 'vuetify/lib/directives'

src/viewer/ModelViewerWrapper.vue

@@ -11,7 +11,7 @@ import {ModelViewerElement} from '@google/model-viewer';
 import type {ModelScene} from "@google/model-viewer/lib/three-components/ModelScene";
 import {Hotspot} from "@google/model-viewer/lib/three-components/Hotspot";
 import type {Renderer} from "@google/model-viewer/lib/three-components/Renderer";
-import {Vector3} from "three";
+import type {Vector3} from "three";
 
 ModelViewerElement.modelCacheSize = 0; // Also needed to avoid tree shaking