Tengo una aplicación web que contiene varias páginas con algunos archivos js de código compartido.
- common1.js - common2.js - page1.js - page2.js - page3.js ...Los archivos compartidos se cargan con la página 1 y, al hacer clic en un botón, la página cambia a la página 2 o la página 3. Uso Closure Compiler y cada página es un fragmento.
--js "../common1.js" \ --chunk common1.min:1 \ --js "../common2.js" \ --chunk common2.min:1:common1.min \ --js "../page1.js" \ --chunk page1.min:1:common2.min \ --js "../page2.js" \ --chunk page2.min:1:common2.min \Todo funciona y los fragmentos se cargan correctamente. (OPTIMIZACIONES_AVANZADAS)
Desafortunadamente, necesito comenzar a usar módulos. Refactoricé los archivos js para usar importar/exportar. El problema es que todo el código se mueve en mi punto de entrada y los otros fragmentos están vacíos.
--compilation_level ADVANCED_OPTIMIZATIONS \ --language_out ECMASCRIPT_2021 \ --dynamic_import_alias "dynamicImport" \ --chunk_output_type "ES_MODULES" \ --dependency_mode PRUNE_LEGACY \ --entry_point "${JS_PATH}/page1.js" \EG: la página 2 y la página 3 están vacías.
¿Qué estoy haciendo mal? La única solución que he encontrado es construir cada página individualmente. Sin embargo, dado que se comparte mucho código, la salida del archivo sería mayor ya que no se puede usar el código compartido. (Se almacena en caché, por lo que no hay tiempo de carga para ello)
Cada archivo individual es un punto de entrada individual y debe compilar cada uno de los archivos por separado.
Si comparten código común, impórtelos en sus respectivas páginas y compile los archivos por separado.
Si necesita fragmentos separados con un único punto de entrada, intente utilizar las importaciones dinámicas. Esto creará fragmentos como esperabas.
Consulte: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports
Nota: Webpack maneja los fragmentos dinámicos lo suficientemente bien. Sin embargo, no probé esto con Closure.