O que significa "O gerador de código desativou o estilo de [algum arquivo], pois excede o máximo de" 100 KB ""?

164

Adicionei um novo pacote npm ao meu projeto e o exigi em um dos meus módulos.

Agora recebo esta mensagem do webpack,

build modulesNote: The code generator has deoptimised the styling of "D:/path/to/project/node_modules/ramda/dist/ramda.js" as it exceeds the max of "100KB".

O que isso significa? Preciso tomar alguma ação?

Johan Alkstål
fonte
Você pode colocar a configuração do Webpack em algum lugar? O que é o pacote NPM em questão?
Juho Vepsäläinen
Johan, certifique-se a aceitar a resposta que resolveu isso para você
Dana Woodman

Respostas:

151

Isso está relacionado à compactopção do compilador Babel, que ordena "não incluir caracteres de espaço em branco supérfluos e terminadores de linha. Quando definido como 'automático', compacto é definido como verdadeiro em tamanhos de entrada> 100 KB". Por padrão, seu valor é "auto", e provavelmente esse é o motivo pelo qual você está recebendo a mensagem de aviso. Veja a documentação do Babel .

Você pode alterar esta opção do Webpack usando um parâmetro de consulta . Por exemplo:

loaders: [
    { test: /\.js$/, loader: 'babel', query: {compact: false} }
]
Ricardo Stuven
fonte
16
E se você tiver vários carregadores, poderá usar em ?compact=falsevez do queryparâmetro. Por exemplo:{test: /\.js$/, loaders: ['ng-annotate', 'babel?compact=false']}
kendsnyder
4
também podemos adicionar a opção ao arquivo .babelrc para tornar o arquivo webpack.config.js limpo, como adicionar {"compact": true} ao arquivo .babelrc.
Ron
3
@ Ricardo Stuven, mas por que eu mudaria para falso? parece ser uma coisa positiva para "não incluem espaços em branco supérfluos e terminadores de linha"
omriman12
1
@ Ben, então basicamente definiríamos como false apenas no desenvolvimento?
precisa saber é o seguinte
2
@ omriman12 Depende de como você usará a saída. Se é uma compilação de produção que vai ser minified, então não há nenhum valor em definindo este parâmetro para false. Para casos como o meu, onde o formato da saída é importante, isso tem valor. Como a maioria das coisas, depende. :)
Ben
48

Este parece ser um erro do Babel . Suponho que você use o babel-loader e não exclua bibliotecas externas do seu teste do carregador. Pelo que sei, a mensagem não é prejudicial, mas você ainda deve fazer algo assim:

loaders: [
    { test: /\.js$/, exclude: /node_modules/, loader: 'babel' }
]

Dar uma olhada. Foi isso?

mhelvens
fonte
1
Estranho, vejo a mesma mensagem (também para ramda), embora sim exclude: /node_modules/.
Roman Pominov 28/10/2015
Mesmo caminho também? Talvez sua biblioteca externa esteja localizada em outro lugar? Caso contrário, você também pode tentar a solução de Ricardo. Este problema não é muito crítico.
Mhelvens 28/10/2015
Foi mal. Eu estava verificando a configuração errada. O real não tinha exclude.
Roman Pominov 29/10/2015
Encontrei esta resposta melhor. Obrigado @mhelvens
Mosia Thabo
22

Qualquer uma das três opções abaixo se livra da mensagem (mas por razões diferentes e com efeitos colaterais diferentes, suponho):

  1. excluir o node_modulesdiretório ou explicitamente includeo diretório em que seu aplicativo reside (que provavelmente não contém arquivos com mais de 100 KB)
  2. colocou o opção Babel compact como true(na verdade, qualquer valor que não seja "automático")
  3. defina a opção Babel compactcomo false(veja acima)

O número 1 na lista acima pode ser alcançado excluindo o node_modulesdiretório ou incluindo explicitamente o diretório em que seu aplicativo reside.

Por exemplo, em webpack.config.js :

let path = require('path');
....
module: {
     loaders: [
          ...
          loader: 'babel',
          exclude: path.resolve(__dirname, 'node_modules/')

... ou usando include: path.resolve(__dirname, 'app/') (novamente em webpack.config.js).

Os nºs 2 e 3 da lista acima podem ser realizados pelo método sugerido nesta resposta ou (de preferência) editando o .babelrcarquivo. Por exemplo:

$ cat .babelrc 
{
    "presets": ["es2015", "react"],
    "compact" : true
}

Testado com a seguinte configuração:

$ npm ls --depth 0 | grep babel
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
Marcus Junius Brutus
fonte
8

Eu tentei o jeito de Ricardo Stuven, mas não funcionou para mim. O que funcionou no final foi adicionar "compact": false ao meu arquivo .babelrc:

{
    "compact": false,
    "presets": ["latest", "react", "stage-0"]
}
Yusinto Ngadiman
fonte
1
Usando babel 6.5.x, webpack 2, eu tinha a mesma mensagem, mas para lodash.js, e isso corrigiu o problema.
phil_lgr
Veio procurando por isso :)
informador
Obrigado, eu tinha exatamente a mesma coisa
Henkie85
4

Para mais explicações THIS LINK, é opcional Babel compilerque os comandos não incluam caracteres de espaço em branco supérfluos e terminadores de linha. algumas vezes atrás, seu limiar era, 100KBmas agora é 500KB.

Eu sugiro que você desative essa opção no seu ambiente de desenvolvimento, com esse código no .babelrcarquivo.

{
    "env": {
      "development" : {
        "compact": false
      }
    }
}

Para o ambiente de produção, Babeluse a configuração padrão que é auto.

AmerllicA
fonte
2

Na compilação react / redux / webpack / babel, foi corrigido este erro removendo o tipo de tag de script text / babel

obteve erro:

<script type="text/babel" src="/js/bundle.js"></script>

sem erro:

<script src="/js/bundle.js"></script>
Vitaliy Kotov
fonte
1

no webpack 4 com várias regras de módulo, você faria algo assim na sua regra .js:

{
     test: /\.(js)$/,
     loader: 'babel-loader',
     options: {
          presets: ['es2015'],    // or whatever
          plugins: [require('babel-plugin-transform-class-properties')], // or whatever
          compact: true    // or false during development
     }
},
steev
fonte
1

Talvez este não seja o caso da pergunta original do OP, mas: se você exceder o tamanho máximo padrão, isso talvez seja um sintoma de algum outro problema que você tenha. no meu caso, eu tinha o aviso, mas finalmente ele se transformou em um FATAL ERRO: MarkCompactCollector: cópia semiespaço, fallback na geração antiga A alocação falhou - o heap do JavaScript está sem memória. o motivo foi que eu importei dinamicamente o módulo atual , então isso acabou com um loop infinito ...

shmuel friedman
fonte
Foi um sintoma para mim - comecei a remover / adicionar minhas importações para tentar localizá-lo. O script incorreto estava usando um dinâmico require ( require('../../../' + a + '/' + b)). Removê-lo resolveu o problema (e nunca retornará).
Frank
Não sei por que isso foi prejudicado, esse foi exatamente o meu problema. Obrigado shmuel!
Aron