Che cosa significa "Il generatore di codice ha disattivato lo stile di [alcuni file] poiché supera il massimo di" 100 KB ""?

Ho aggiunto un nuovo pacchetto npm al mio progetto e lo richiedo in uno dei miei moduli.

Ora ricevo questo messaggio dal 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".

Cosa significa? Devo agire?

Ciò è correlato compactall'opzione del compilatore Babel, che comanda di "non includere caratteri di spazi vuoti superflui e terminatori di riga. Se impostato su" auto "compact è impostato su true su dimensioni di input> 100 KB." Per impostazione predefinita, il suo valore è "auto", quindi questo è probabilmente il motivo per cui ricevi il messaggio di avviso. Vedi la documentazione di Babel .

È possibile modificare questa opzione da Webpack utilizzando un parametro di query . Per esempio:

loaders: [
    { test: /\.js$/, loader: 'babel', query: {compact: false} }
]

Questo sembra essere un errore di Babele . Immagino che tu usi babel-loader e non stia escludendo le librerie esterne dal tuo test di caricamento. Per quanto posso dire, il messaggio non è dannoso, ma dovresti comunque fare qualcosa del genere:

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

Dare un'occhiata. È stato?

Una delle tre opzioni seguenti elimina il messaggio (ma per motivi diversi e con effetti collaterali diversi suppongo):

1. escludi la node_modulesdirectory o esplicitamente includela directory in cui risiede la tua app (che presumibilmente non contiene file superiori a 100 KB)
2. imposta l' opzione Babel compact su true(in realtà qualsiasi valore diverso da "auto")
3. imposta l'opzione Babel compactsu false(vedi sopra)

Il numero 1 nell'elenco precedente può essere ottenuto escludendo la node_modulesdirectory o includendo esplicitamente la directory in cui risiede l'app.

Ad esempio webpack.config.js:

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

... o usando include: path.resolve(__dirname, 'app/')(di nuovo in webpack.config.js).

# 2 e # 3 nell'elenco precedente possono essere realizzati con il metodo suggerito in questa risposta o (la mia preferenza) modificando il .babelrcfile. Per esempio:

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

Testato con la seguente configurazione:

$ 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

Ho provato a fare Ricardo Stuven ma non ha funzionato per me. Ciò che ha funzionato alla fine è stato l'aggiunta di "compact": false al mio file .babelrc:

{
    "compact": false,
    "presets": ["latest", "react", "stage-0"]
}

Per ulteriori spiegazioni leggere THIS LINK, è un'opzione di Babel compilerquei comandi per non includere caratteri di spazi vuoti superflui e terminatori di riga. alcune volte fa la sua soglia era, 100KBma ora lo è 500KB.

Ti consiglio di disabilitare questa opzione nel tuo ambiente di sviluppo, con questo codice nel .babelrcfile.

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

Per l'ambiente di produzione Babelutilizzare la configurazione predefinita che è auto.

Nella reazione / redux / webpack / babel build risolto questo errore rimuovendo il tipo di tag script text / babel

ottenuto errore:

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

nessun errore:

<script src="/js/bundle.js"></script>

nel webpack 4 con più regole del modulo faresti semplicemente qualcosa del genere nella tua regola .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
     }
},

Questo non è forse il caso della domanda OP originale, ma: se si supera la dimensione massima predefinita, questo potrebbe essere un sintomo di qualche altro problema che si ha. nel mio caso, ho avuto la guerra, ma alla fine si è trasformato in un ERRORE FATALE: MarkCompactCollector: copia semi-spaziale, fallback nella vecchia generazione Allocazione fallita - Heap JavaScript esaurito dalla memoria. il motivo era che ho importato dinamicamente il modulo corrente , quindi questo è finito con un ciclo infinito ...