experiencia del código fuente de vue

Hace años, comencé a ser responsable del desarrollo de un nuevo proyecto, que es un h5 integrado en WeChat corporativo. La pila de tecnología es vite2.x vue3.x Con el desarrollo empresarial, iteraciones de versiones, cada vez más páginas, más y más dependencias de terceros y cada vez más paquetes impresos. Para solucionar este problema, es fácil pensar en la subcontratación como una solución. Según la documentación oficial de Vite, además de la subcontratación de proveedores, los componentes a los que se hace referencia mediante el enrutamiento también se cargan de forma asincrónica y también se producirá una subcontratación independiente. Esta configuración no es problemática en determinadas etapas.

Después de leer el código fuente y los documentos oficiales, analicé las estrategias de subcontratación de Vite y Rollup, y finalmente se me ocurrió esta solución:

Echemos un vistazo a cómo se analizó , paso a paso Da un paso más para desmitificar la política de subcontratación predeterminada.

Después de la prueba, en el archivo de configuración de vite, después de que la estrategia de subcontratación manual coincida con la compilación, el paquete del proveedor no se generará automáticamente. Opciones de resumen. producción. Troceado manual. Si desea saber con mayor claridad cuándo Vite está dividido en paquetes de proveedores y cuándo no, debe abrir el código fuente para verlo con claridad.

Resumen: Cuando los usuarios configuran la subcontratación manual, se ignorará la lógica de subcontratación de proveedores proporcionada por vite.

Entonces, si desea subcontratar proveedores basándose en la subcontratación manual, debe copiar la lógica de la subcontratación de proveedores.

Observaciones:

¿Por qué se producen fragmentos de fragmentos? Con referencia a la comprensión del subempaquetado del paquete web, además de que el punto de entrada (punto de entrada estático, punto de entrada dinámico) genera un fragmento por separado, cuando dos o más fragmentos hacen referencia a un módulo, este módulo necesita generar un fragmento por separado.

Veamos cómo el resumen genera estos fragmentos de bloque desde la perspectiva del código fuente.

Veamos qué hace getChunkAssignments.

Resumen:

Veamos cómo se realiza la subcontratación predeterminada a través de createChunks.

Para la generación de firmas de bloque, por poner un ejemplo concreto, allEntryPoints incluye un punto de entrada estático index.html y dos puntos de entrada dinámicos: Hello.vue y World.vue, y existe un módulo sdkUtils. js El punto de entrada es Hello.vue (es decir, importado por Hello.vue); hay un módulo api.js cuyos puntos de entrada son Hello.vue y world.vue y un módulo log.js que depende de Hello.vue. World.vue e index.html.

Entonces, en este ejemplo, se generarán seis fragmentos, el fragmento correspondiente a api.js y el fragmento correspondiente a log.js son fragmentos adicionales.

Resumen: