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", "@types/three": "^0.160.0",
"buffer": "^5.5.0||^6.0.0", "buffer": "^5.5.0||^6.0.0",
"parcel": "^2.11.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) console.log('Model-Viewer finished loading:', args)
modelViewerInfo = args modelViewerInfo = args
}"/> }"/>
<model-viewer-overlay/> <model-viewer-overlay v-if="modelViewerInfo"/>
</v-main> </v-main>
<!-- The left collapsible sidebar has the list of models --> <!-- The left collapsible sidebar has the list of models -->
<sidebar :opened-init="openSidebarsDefault" side="left"> <sidebar :opened-init="openSidebarsDefault" side="left">
@@ -63,8 +63,11 @@ let modelViewerInfo: Ref<typeof ModelViewerInfo | null> = ref(null);
<!--suppress CssUnusedSymbol --> <!--suppress CssUnusedSymbol -->
<style> <style>
html, body, #app, #main { html, body, #main {
height: 100%; height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
} }
</style> </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; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100vh; height: 100dvh;
pointer-events: none; pointer-events: none;
} }
</style> </style>

View File

@@ -59,7 +59,7 @@ function updateGizmo() {
let reinstall = () => { let reinstall = () => {
if (gizmo) container.value.removeChild(gizmo); 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); container.value.appendChild(gizmo);
requestIdleCallback(updateGizmo); // Low priority updates requestIdleCallback(updateGizmo); // Low priority updates
} }

View File

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

View File

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

View File

@@ -8,8 +8,6 @@ import {createApp} from 'vue'
import App from './App.vue' import App from './App.vue'
import {createVuetify} from 'vuetify'; import {createVuetify} from 'vuetify';
import 'vuetify/lib/styles/main.sass';
import '@mdi/font/css/materialdesignicons.css'
import * as directives from 'vuetify/lib/directives'; import * as directives from 'vuetify/lib/directives';
const vuetify = createVuetify({ const vuetify = createVuetify({
@@ -23,3 +21,7 @@ const app = createApp(App)
app.use(vuetify) app.use(vuetify)
// noinspection JSUnresolvedReference // noinspection JSUnresolvedReference
app.mount('body') 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 // Avoids typescript error when importing files
declare module '*.vue' 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'