optimize build size 2

This commit is contained in:
Yeicor
2024-02-10 19:20:05 +01:00
parent 0aa0be4a1e
commit e9b24fd333
9 changed files with 17 additions and 32 deletions

View File

@@ -26,10 +26,5 @@
"@types/three": "^0.160.0",
"buffer": "^5.5.0||^6.0.0",
"parcel": "^2.11.0"
},
"browserslist": [
"> 0.5%",
"last 2 versions",
"not dead"
]
}
}

View File

@@ -35,7 +35,7 @@ let modelViewerInfo: Ref<typeof ModelViewerInfo | null> = ref(null);
console.log('Model-Viewer finished loading:', args)
modelViewerInfo = args
}"/>
<model-viewer-overlay/>
<model-viewer-overlay v-if="modelViewerInfo"/>
</v-main>
<!-- The left collapsible sidebar has the list of models -->
<sidebar :opened-init="openSidebarsDefault" side="left">
@@ -63,8 +63,11 @@ let modelViewerInfo: Ref<typeof ModelViewerInfo | null> = ref(null);
<!--suppress CssUnusedSymbol -->
<style>
html, body, #app, #main {
html, body, #main {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>

View File

@@ -1,18 +0,0 @@
<script setup lang="ts">
import ModelViewerOverlay from "./ModelViewerOverlay.vue";
import Loading from "./Loading.vue";
import {defineAsyncComponent} from "vue";
// NOTE: The ModelViewer library is big, so we split it and import it asynchronously
const ModelViewerWrapper = defineAsyncComponent({
loader: () => import('./ModelViewerWrapper.vue'),
loadingComponent: Loading,
delay: 0,
});
</script>
<template>
</template>
<style scoped>
</style>

View File

@@ -26,7 +26,7 @@
top: 0;
left: 0;
width: 100%;
height: 100vh;
height: 100dvh;
pointer-events: none;
}
</style>

View File

@@ -59,7 +59,7 @@ function updateGizmo() {
let reinstall = () => {
if (gizmo) container.value.removeChild(gizmo);
gizmo = createGizmo(container.value, props.scene) as typeof gizmo;
gizmo = createGizmo(container.value, props.scene as ModelScene) as typeof gizmo;
container.value.appendChild(gizmo);
requestIdleCallback(updateGizmo); // Low priority updates
}

View File

@@ -8,6 +8,7 @@ const props = defineProps({
function toggleProjection() {
if (!props.modelViewerInfo) return;
console.log('Toggling projection', props.modelViewerInfo);
}
</script>

View File

@@ -7,6 +7,5 @@
<script type="module" src="./index.ts"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>

View File

@@ -8,8 +8,6 @@ import {createApp} from 'vue'
import App from './App.vue'
import {createVuetify} from 'vuetify';
import 'vuetify/lib/styles/main.sass';
import '@mdi/font/css/materialdesignicons.css'
import * as directives from 'vuetify/lib/directives';
const vuetify = createVuetify({
@@ -23,3 +21,7 @@ const app = createApp(App)
app.use(vuetify)
// noinspection JSUnresolvedReference
app.mount('body')
// Start non-blocking loading of Vuetify and icon styles
import('vuetify/lib/styles/main.sass');
import('@mdi/font/css/materialdesignicons.css');

5
src/shims.d.ts vendored
View File

@@ -1,3 +1,6 @@
// Avoids typescript error when importing files
declare module '*.vue'
declare module 'three-orientation-gizmo/src/OrientationGizmo'
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/directives'