¿Hay alguna forma de construir mi aplicación svelte o react de manera que el módulo three.js (que generalmente importo usando npm) se declare como una etiqueta de secuencia de comandos que llamará al módulo desde un CDN? Me gustaría mantener las ventajas de un marco, pero también poder reducir el tamaño final de mi paquete, ya que la mayor parte de mi paquete contiene tres códigos.
Gracias por tu sabiduría
Sí, puedes hacer lo siguiente:
En su archivo "index.html", puede importar el archivo js desde un CDN de la siguiente manera:
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>Luego, en el archivo donde desea usarlo, que podría ser un componente de React, por ejemplo, puede hacer lo siguiente:
const THREE = window.THREE; Lo que reemplazaría su declaración de importación, que habría sido import * as THREE from "three"; o import THREE from "three";
Hay dos formas de lograr su objetivo de reducir el tamaño del paquete:
Para mantener la semántica de ESModules, simplemente puede reemplazar sus importaciones actuales three.js con una URL de un CDN npm, como unpkg :
| ventajas | Contras |
|---|---|
| No se necesita configuración adicional | Más lento para cargar, ya que el navegador necesita activar nuevas conexiones para acceder a CDN de terceros |
Asíncronamente
<script> // App.svelte import('https://unpkg.com/three@0.133.1/build/three.min.js').then(({ default: THREE }) => { // your code here }); </script>Sincrónicamente
Nota: Importar de esta manera bloquea el resto de la secuencia de comandos para que no se cargue mientras se descarga
three.js, lo que anula el propósito de todo el proceso. Solo está aquí para completar
<script> // App.svelte import { default as THREE } from 'https://unpkg.com/three@0.133.1/build/three.min.js'; // your code here </script> Este método aprovecha el hecho de que ya está utilizando un paquete (probablemente rollup , vite o webpack ). Esta respuesta se centrará en el rollup , ya que es el valor predeterminado que se usa en los ejemplos de svelte .
| ventajas | Contras |
|---|---|
| Más rápido de cargar, ya que el navegador puede usar las conexiones existentes para acceder a los recursos propios | Más complicado de configurar |
Asíncronamente
En su archivo rollup.config.js , asegúrese de que output.format esté configurado en 'esm' y que output.dir esté configurado en lugar de output.file
// rollup.config.js import svelte from 'rollup-plugin-svelte'; import resolve from '@rollup/plugin-node-resolve'; import commonjs from '@rollup/plugin-commonjs'; import postcss from 'rollup-plugin-postcss'; const production = !process.env.ROLLUP_WATCH; export default { input: 'src/index.js', output: { sourcemap: !production, format: 'esm', name: 'app', dir: 'public', }, plugins: { // your plugins svelte({ compilerOptions: { dev: !production, }, }), postcss({ extract: 'bundle.css', }), resolve({ browser: true, dedupe: ['svelte'], }), commonjs(), } } <script> // App.svelte import('three').then(({ default: THREE }) => { // your code here }); </script>Nota: No hay una forma síncrona debido a cómo se evalúa la división de código en tiempo de compilación. Además, no tiene mucho sentido hacerlo así de todos modos.