Estoy tratando de averiguar por qué una aplicación (Vuejs3, webpack 5, Babel 7) se comporta de manera diferente en producción que en modo de desarrollo. Por alguna razón, en el modo de producción, las importaciones y exportaciones funcionan de manera diferente (es decir, los archivos no se importan en absoluto, es decir, su código no se ejecuta durante la importación).
Esta es la estructura que funciona en modo desarrollo:
+- foo/ | +-- index.js | | export {default as Component} from './comp'; | export {default as SomethingElse} from './comp2'; | | +-- comp.vue | | alert('hey there!'); | export default {...component here...} | +- main.js import './foo'; Esto funciona bien en el modo de desarrollo, pero no en producción. Parece que el código en comp.vue nunca se ejecuta y, por lo tanto, el componente no se importa/registra. Traté de usar la reexportación/agregación en index.js en su lugar, pero eso no cambió nada.
Si cambio main.js para import {Component} from './foo' entonces todo funciona bien. Sin embargo, el patrón import 'file' se usa con tanta frecuencia que me costaría cambiarlo (y funciona en modo de desarrollo).
Otra forma de hacer que esto funcione es establecer el mapa de origen en eval-cheap-source-map (en lugar de source-map ) en producción, que es el mismo método de mapa de origen utilizado en el desarrollo. Por el contrario, si cambio el mapa fuente a mapa source-map en el modo de desarrollo, el componente se carga correctamente.
Lo que me lleva a la conclusión de que webpack maneja de alguna manera la exportación/importación diferente en producción que en desarrollo (la observación del mapa fuente es solo una observación, pero vale la pena señalar). Estoy un poco desconcertado en cuanto a por qué sucede esto, así que me gustaría apreciar cualquier experiencia que pueda compartir.
Nota
Esto puede ser un problema con algunos de los pasos de optimización del modo de producción. ¿Hay alguna forma de deshabilitarlos (todos ellos para ver si este es el problema general y luego deshabilitar/volver a habilitar partes de ellos para encontrar al "culpable"?)
Después de muchos intentos fallidos de arreglar esto en la configuración del paquete web, llegué a esta configuración:
optimization: { minimize: true, minimizer: [ new CssMinimizerPlugin(), new TerserPlugin({ terserOptions: { compress: { unused: false } } }) ] },
unused(predeterminado: verdadero) -- eliminar funciones y variables no referenciadas (las asignaciones de variables directas simples no cuentan como referencias a menos que se establezcan en "keep_assign")
Esto parece evitar que se elimine el código de efectos secundarios cuando se usan reexportaciones. Sin embargo, todavía tengo que averiguar por qué el código se consideró libre de efectos secundarios (que no es el valor predeterminado, por lo que puedo decir).