Temblor de árbol no trabaja para la biblioteca de componentes de react usando importaciones llamadas

Nuestros proyectos de empresa cuentan está creciendo, así que decidimos mover nuestro kit de ui a un paquete privado de npm separado. Para el kit de construcción antes de la publicación decidimos utilizar la enrollación. La estructura de archivos para ui kit es bastante estándar que tenemos:

src
       - Components
         - Alert
         - Button
         - Heading
         - ...
       HOC, static...

       - index.js

El archivo Root index.js se utiliza sólo para reexportar todos los componentes.

export {default as Alert} from './Components/Alert';
export {default as Button} from './Components/Button';
...

Nuestro objetivo principal es poder obtener componentes de nuestro kit utilizando importaciones nombradas.

import {Alert, Button} from '@company/ui-kit';

También es importante el afeitado de árboles de trabajo adecuado, ya que algunos de nuestros proyectos están utilizando sólo 2/31 componentes del kit, por lo que queremos ver en los componentes finales de construcción sólo lo que se ha utilizado y este es el principal desafío. Probamos muchas opciones de configuración de laminación con un solo archivo de salida o pedazos y nos dimos cuenta, que el temblor de árboles sólo funciona con pedazos y lo más interesante que funciona sólo con la importación de pedazos directamente, no llamado importación desde el index.js.

import Alert from '@company/ui-kit/Alert'; // tree shaking works, only Alert get into build
import {Alert} from '@company/ui-kit'; // tree shaking not working, all kit components are got into the build

¿Podría alguien explicarme por qué está pasando esto? Y hay alguna manera de utilizar importaciones llamadas con el afeitado adecuado de los árboles de trabajo. Lo que también es muy curioso, que tratamos de probar el temblor de árboles con importaciones llamadas en algunas bibliotecas populares como material ui y allí no está funcionando también. El afeitado de árboles sólo funciona con importación directa de pedazos.

También hay que mencionar que probamos el temblor de árboles sólo en proyectos creados con la aplicación de recreación. Realmente no creo que el problema podría estar dentro del config de creador-react-app, pero tal vez ayudará a averiguar esto.

Para el cuadro completo también adjunta nuestro config de rollup:

import multiInput from 'rollup-plugin-multi-input';
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import external from 'rollup-plugin-peer-deps-external';
import resolve from 'rollup-plugin-node-resolve';
import copy from 'rollup-plugin-copy'
import postcss from 'rollup-plugin-postcss';
import postcssUrl from 'postcss-url';
import asset from "rollup-plugin-smart-asset";

export default {
    input: ['src/index.js', 'src/Components/**/*.js'],
    output: [
        {
            dir: './',
            format: 'cjs',
            sourcemap: true,
            exports: 'auto',
            chunkFileNames: '__chunks/[name]_[hash].js'
        }
    ],
    plugins: [
        multiInput({relative: 'src/'}),
        external(),
        postcss({
            modules: false,
            extract: true,
            minimize: true,
            sourceMap: true,
            plugins: [postcssUrl({url: 'inline', maxSize: 1000})],
        }),
        copy({targets: [{src: 'src/static/icons/fonts/*', dest: 'fonts'}]}),
        babel({exclude: 'node_modules/**'}),
        asset({url: 'copy', keepImport: true, useHash: false, keepName: true, assetsPath: 'assets/'}),
        resolve(),
        commonjs({include: 'node_modules/**'})
    ]
};

¡Gracias de antemano por sus respuestas!

Pregunta hecha hace 3 años, 4 meses, 11 días - Por htmlhero

2 Respuestas:

  • El problema que estás experimentando con el temblor de árboles al usar importaciones llamadas en React y otras bibliotecas populares se debe a cómo se están exportando los componentes en tu kit de UI y cómo Rollup está manejando la enrollación de los mismos.

    En el archivo index.js de tu kit de UI, estás reexportando los componentes de la siguiente manera:

    javascript
export {default as Alert} from './Components/Alert';
export {default as Button} from './Components/Button';

    Cuando haces una importación llamada como esta:

    javascript
import {Alert, Button} from '@company/ui-kit';

    Rollup no puede detectar qué componentes se utilizan y realiza una importación de todo el kit de UI, lo cual evita que el temblor de árboles funcione correctamente.

    Para resolver este problema y permitir el temblor de árboles con importaciones llamadas, puedes cambiar la forma en que se reexportan los componentes en tu archivo index.js. En lugar de reexportar directamente desde cada componente, puedes hacerlo de la siguiente manera:

    javascript
export {default as Alert} from './Components/Alert';
export {default as Button} from './Components/Button';

    De esta forma, Rollup podrá identificar de manera más precisa qué componentes se utilizan y solo incluirá en la build los que realmente se están utilizando en tu proyecto.

    Espero que esta explicación y solución te ayuden a resolver el problema con el temblor de árboles en tu proyecto de React. ¡Déjame saber si necesitas más ayuda o aclaraciones!

    Respondida el Dec 20, 2020 a las 06:46 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • El problema que estás experimentando con el afeitado de árboles en tu kit de interfaz de usuario de React cuando usas importaciones nombradas se debe a la forma en que funciona el afeitado de árboles en Rollup.

    Cómo funciona el afeitado de árboles en Rollup

    Rollup usa un algoritmo de análisis de flujo de datos para determinar qué partes de tu código son necesarias para la construcción final. Cuando importas un módulo, Rollup analiza el código para identificar cualquier dependencia que tenga. Si una dependencia no se usa en ninguna parte del código que se está construyendo, se elimina del paquete final.

    Importaciones nombradas vs. importaciones directas

    Cuando importas un módulo usando una importación llamada (por ejemplo, { Alert } from '@company/ui-kit'), Rollup solo analiza el código dentro de ese módulo específico. No analiza ningún otro código en el paquete que importa el módulo.

    Por otro lado, cuando importas un módulo usando una importación directa (por ejemplo, import Alert from '@company/ui-kit/Alert'), Rollup analiza todo el código en el paquete que importa el módulo. Esto le permite identificar cualquier dependencia que pueda necesitarse en otras partes del código, incluso si no se usa directamente en el módulo que se está importando.

    Por qué el afeitado de árboles no funciona con importaciones nombradas

    Debido a la forma en que funciona el análisis de flujo de datos de Rollup, solo puede afeitar los árboles de código que se analizan. Cuando usas importaciones nombradas, solo se analiza el código dentro del módulo que se importa. Como resultado, Rollup no puede identificar dependencias que se utilizan en otras partes del código y, por lo tanto, no puede eliminarlas del paquete final.

    Solución

    Para que el afeitado de árboles funcione con importaciones nombradas, debes usar importaciones directas en su lugar. Esto permitirá que Rollup analice todo el código en el paquete que importa el módulo y elimine cualquier dependencia no utilizada del paquete final.

    Alternativa

    Si realmente necesitas usar importaciones nombradas, puedes utilizar una herramienta como Rollup Tree Shaking Plugin. Este complemento utiliza un algoritmo alternativo que permite el afeitado de árboles con importaciones nombradas. Sin embargo, ten en cuenta que este complemento puede tener sus propias limitaciones y es posible que no funcione en todos los casos.

    Respondida el Dec 20, 2020 a las 06:47 - por Gemini

    Votos positivos: 0 | Votos negativos: 0