Início / coding / Perguntas / 79314878
Accepted
Bear Bile Farming is Torture
Asked: 2024-12-29 10:29:26 +0800 CST

Como configurar o webpack para excluir determinados módulos de uma biblioteca?

  • 772

Tenho um aplicativo React que importa uma biblioteca (no diretório node_modules, é claro).

O nome da biblioteca é @lib/schema.

No aplicativo React, os módulos desta biblioteca são importados assim:

import { module_name } from "@lib/schema"

Há um determinado arquivo no @lib/schemaque está sendo incluído no pacote final, que está localizado neste caminho:

src/path/to/large_file.js

O arquivo nunca é usado pelo aplicativo e, portanto, aumenta desnecessariamente o tamanho do pacote.

O aplicativo React atualmente é usado react-scriptspara criar o pacote.

Questões:

  1. Se o aplicativo React continuar a usar react-scripts, como faço para configurá-lo para excluir src/path/to/large_file.js?
  2. Se o aplicativo React usasse webpack, como faço para configurá-lo para excluir src/path/to/large_file.js?
javascript

2 respostas

  1. Best Answer

    Se você quiser evitar completamente a importação do arquivo, você pode criar um alias para ele que aponte para um módulo vazio.

    1. Modifique a configuração do seu Webpack:

    No seu webpack.config.js, adicione um alias para o arquivo grande:

    const path = require('path');

module.exports = {
// ... other configurations
resolve: {
alias: {
  '@lib/schema/src/path/to/large_file.js': path.resolve(__dirname, 
'path/to/empty.js'),
},
},
};

    2. Crie um módulo vazio:

    Crie um arquivo chamado empty.js no caminho especificado (por exemplo, path/to/empty.js)

    Conclusão Ao seguir os métodos acima, você pode efetivamente excluir src/path/to/large_file.js do seu pacote final, esteja você usando react-scripts ou uma configuração Webpack personalizada. Escolha o método que melhor se encaixa na configuração do seu projeto.

    • 1

  2. react-scriptspertence ao CRA, que usa Webpack. Se large_filenão for usado no aplicativo, não deve estar em um pacote. Para uma importação dinâmica, como require(`src/path/to/${file_name}`)todos os arquivos dentro to/são incluídos em um pacote.

    A maneira mais fácil de evitar isso é estruturar um projeto de forma que arquivos indesejados não sejam correspondidos pela importação dinâmica, ou seja, to/contenham apenas os arquivos em uso.

    É possível alterar a configuração do Webpack do CRA com ferramentas como react-app-rewired ou Craco. O Webpack IgnorePluginpode ContextReplacementPluginser usado para excluir um módulo quando ele já estiver incluído.

    Alternativamente, webpackExcludea opção pode ser usada em um comentário para anotar uma importação.

    • 1

relate perguntas