Nota:
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
[Este tema es documentación preliminar y está sujeto a modificaciones.]
Con las aplicaciones basadas en modelos, puede reutilizar una biblioteca precompilada contenida en otro componente que se carga como dependencia de más de un componente.
No es deseable tener copias de una biblioteca precompilada en varios controles. La reutilización de bibliotecas existentes mejora el rendimiento, especialmente cuando la biblioteca es grande, al reducir el tiempo de carga de todos los componentes que utilizan la biblioteca. La reutilización de bibliotecas también ayuda a reducir la sobrecarga de mantenimiento en los procesos de compilación.
Antes
Después de
Para usar bibliotecas dependientes, necesita:
- Cree un componente de biblioteca que contenga la biblioteca. Este componente puede proporcionar alguna funcionalidad o solo ser un contenedor para la biblioteca.
- Configure otro componente para que dependa de la biblioteca cargada por el componente de biblioteca.
De forma predeterminada, la biblioteca se carga cuando se carga el componente dependiente, pero puede configurarla para que se cargue bajo demanda.
De esta manera, puede mantener la biblioteca de forma independiente en el control de biblioteca y los controles dependientes no necesitan tener una copia de la biblioteca incluida con ellos.
Cómo funciona
Debe agregar datos de configuración a su proyecto de componentes para que el proceso de construcción implemente sus bibliotecas de la manera que desee. Establezca estos datos de configuración agregando o editando los siguientes archivos:
- featureconfig.json
- webpack.config.js
- Editar el esquema del manifiesto para Registrar dependencias
featureconfig.json
Agregue este archivo para anular los indicadores de características predeterminados para un componente sin modificar los archivos generados en la carpeta node_modules.
En la siguiente tabla se describen las banderas de característica establecidas en featureconfig.json:
| Nombre. | Description |
|---|---|
pcfResourceDependency |
Permite que el componente utilice un recurso de biblioteca. |
pcfAllowCustomWebpack |
Permite que el componente utilice un paquete web personalizado. Esta característica debe estar habilitada para los componentes que definen un recurso de biblioteca. |
De forma predeterminada, estos valores son off. Establézcalos en on para reemplazar el predeterminado. Por ejemplo:
{
"pcfAllowCustomWebpack": "on"
}
{
"pcfResourceDependency": "on",
"pcfAllowCustomWebpack": "off"
}
webpack.config.js
El proceso de compilación de los componentes utiliza Webpack para agrupar el código y las dependencias en un activo implementable. Para excluir las bibliotecas de esta agrupación, agregue un archivo webpack.config.js a la carpeta raíz del proyecto que especifique el alias de la biblioteca como externals.
Más información sobre la opción de configuración de elementos externos de Webpack
Este archivo puede tener el siguiente aspecto cuando el alias de biblioteca es myLib.
/* eslint-disable */
"use strict";
module.exports = {
externals: {
"myLib": "myLib"
},
}
Registrar dependencias
Use el elemento de dependencia dentro de los recursos del esquema de manifiesto.
<resources>
<dependency
type="control"
name="samples_SampleNS.SampleStubLibraryPCF"
order="1"
/>
<code path="index.ts" order="2" />
</resources>
Dependencia como carga a petición de un componente
En lugar de cargar la biblioteca dependiente cuando se carga un componente, puede cargar la biblioteca dependiente a petición. La carga a petición proporciona flexibilidad para que los controles más complejos carguen dependencias solo cuando sean necesarias, especialmente si las bibliotecas dependientes son grandes.
Para habilitar la carga bajo demanda, debe:
Agregue estos elementos secundarios elemento de acción de plataforma, elemento de uso de características, y elemento usa característica al elemento de control:
<platform-action action-type="afterPageLoad" /> <feature-usage> <uses-feature name="Utility" required="true" /> </feature-usage>Establezca el atributo
load-typedel elemento de dependencia aonDemand.<dependency type="control" name="samples_SampleNamespace.StubLibrary" load-type="onDemand" />
Pasos siguientes
Pruebe un tutorial que le guiará a través de la creación de una biblioteca dependiente.