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

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?

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} }
]

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?

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
├── babel-core@6.7.4
├── babel-loader@6.2.4
├── babel-preset-es2015@6.6.0
├── babel-preset-react@6.5.0

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"]
}

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.

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>

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
     }
},

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 ...