Uso una biblioteca javascript externa para trabajar con archivos stl ( Stl Viewer ) en un proyecto vue. Inyecto el script en el cuerpo así en la función montada.

 ... mounted () { const script = document.createElement('script') script.setAttribute('src', '/stl_viewer/stl_viewer.min.js') document.head.appendChild(script) } ...

El script funciona bien, pero después de probar algunos modelos 3D con un tamaño> 1 MB, el consumo de memoria aumenta sin sentido, comparo con la vista previa que brinda la biblioteca, y en mi proyecto consume más o menos 10 veces más.

Inicialmente, creo que tal vez llame al script más de una vez, luego creé estados para asegurarme de que esto no suceda.

 ... mounted () { // Verify if script is already loaded if (!this.$store.state.stlViewerLoaded) { // Load script in DOM const script = document.createElement('script') script.setAttribute('src', '/stl_viewer/stl_viewer.min.js') document.head.appendChild(script) // Set that script loaded this.$store.dispatch('stlViewerLoaded') // Wait for script be ready script.onload = this.createInstance return } this.createInstance() }, methods: { createInstance () { // Prevent function called more than once if (!this.instance) { // Obtain script function from window // Create Instance this.instance = new window.StlViewer( // Ref this.$refs.viewer, // Init parameters { models: this.models.map((m, i) => ({ id: i, filename: m })), display: 'smooth', on_model_mouseclick: this.modelClick, controls: 1 } ) } }, ... }

También uso beforeDestroy para borrar cualquier memoria en uso en páginas anteriores.

 beforeDestroy () { if (this.instance) this.instance.dispose() this.instance = null }

Pero no por eso soluciono el problema, también trato de llamar al script directamente en index.html, pero se mantiene igual.

También traté de compilar el proyecto en lugar de usar npm run serve . Pero incluso con la implementación, el problema persiste.

Creo que este script no está optimizado para trabajar con marcos como vue, y es posible que necesite usar algo como three.js (que tiene para npm) para tener más autonomía.

¿Estoy haciendo algo mal? ¿O es un problema con la biblioteca?

Muchas gracias.