Tengo una aplicación de reacción heredada que me gustaría optimizar en términos del tamaño del paquete. Hay algunas dependencias que estoy usando que incluyen una biblioteca pdfjs-dist.
Puedo decidir no usar la funcionalidad que requiere que incluya esa biblioteca. ¿Hay alguna manera de ignorar la agrupación de esta dependencia para reducir el tamaño del paquete?
Hasta ahora he intentado usar elementos externos, pero esto no funcionó. Todavía puedo ver el paquete en webpack-bundle-analyzer.
externals: { "pdfjs-dist": '', },Se supone que el empaquetador empaqueta todas las dependencias. No puede simplemente pedirle que ignore una determinada dependencia.
Pero en su caso, si no va a ejecutar el código que depende del módulo pdfjs-dist , puede usar external para falsificar la dependencia. Simplemente puedes decir:
externals: { 'pdfjs-dist': 'X' } Aquí, Webpack supondrá que hay una variable global denominada X accesible como globalThis.X o window.X , etc. Webpack vinculará todas las invocaciones de pdfjs-dist a esta variable X global. El punto aquí es que su configuración externa no puede tener una cadena en blanco. Entonces, mientras no llame a X , su código funcionará de manera segura.
Además, para crear una X falsa de modo que cuando cualquier propiedad o método se llame accidentalmente , en lugar de un error, puede hacer que falle en silencio usando el interceptor ES Proxy. Agregue esto en algún lugar de su secuencia de inicialización como:
const handler = { get: function(obj, prop) { return 0; } }; // Set as a global object using globalThis or window. window.X = new Proxy({}, handler);