Was bedeutet "Der Codegenerator hat das Styling von [einigen Dateien] deoptimiert, da es das Maximum von" 100 KB "überschreitet?"

Ich habe meinem Projekt ein neues npm-Paket hinzugefügt und benötige es in einem meiner Module.

Jetzt bekomme ich diese Nachricht vom 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".

Was heißt das? Muss ich etwas unternehmen?

Dies hängt mit der compactOption des Babel-Compilers zusammen, der befiehlt, "keine überflüssigen Leerzeichen und Zeilenabschlüsse einzuschließen. Bei Einstellung auf 'auto' wird compact bei Eingabegrößen von> 100 KB auf true gesetzt." Standardmäßig ist der Wert "auto". Dies ist wahrscheinlich der Grund, warum Sie die Warnmeldung erhalten. Siehe Babel-Dokumentation .

Sie können diese Option in Webpack mithilfe eines Abfrageparameters ändern . Beispielsweise:

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

Dies scheint ein Babel-Fehler zu sein . Ich vermute, Sie verwenden Babel-Loader und schließen externe Bibliotheken nicht von Ihrem Loader-Test aus. Soweit ich das beurteilen kann, ist die Nachricht nicht schädlich, aber Sie sollten trotzdem Folgendes tun:

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

Guck mal. War es das

Eine der folgenden drei Optionen entfernt die Nachricht (aber aus verschiedenen Gründen und mit unterschiedlichen Nebenwirkungen, nehme ich an):

1. Schließen Sie das node_modulesVerzeichnis oder explizit includedas Verzeichnis aus, in dem sich Ihre App befindet (das vermutlich keine Dateien mit mehr als 100 KB enthält).
2. Setzen Sie die Babel-Option compact auf true(eigentlich einen anderen Wert als "auto").
3. Setzen Sie die Babel-Option compactauf false(siehe oben)

Die Nummer 1 in der obigen Liste kann erreicht werden, indem entweder das node_modulesVerzeichnis ausgeschlossen oder das Verzeichnis, in dem sich Ihre App befindet, explizit eingeschlossen wird.

ZB in webpack.config.js:

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

... oder mit include: path.resolve(__dirname, 'app/')(wieder in webpack.config.js).

# 2 und # 3 in der obigen Liste können durch die in dieser Antwort vorgeschlagene Methode oder (meine Präferenz) durch Bearbeiten der .babelrcDatei erreicht werden. Z.B:

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

Getestet mit folgendem Setup:

$ 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

Ich habe es mit Ricardo Stuven versucht, aber es hat bei mir nicht funktioniert. Am Ende funktionierte das Hinzufügen von "compact": false zu meiner .babelrc-Datei:

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

Für weitere Erläuterungen THIS LINKkönnen diese Babel compilerBefehle keine überflüssigen Leerzeichen und Zeilenabschlüsse enthalten. Vor einiger Zeit war seine Schwelle 100KBaber jetzt ist 500KB.

Ich biete Ihnen an, diese Option in Ihrer Entwicklungsumgebung mit diesem Code in der .babelrcDatei zu deaktivieren .

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

BabelVerwenden Sie für die Produktionsumgebung die Standardkonfiguration auto.

In React / Redux / Webpack / Babel Build wurde dieser Fehler durch Entfernen des Skript-Tag-Typs text / babel behoben

Fehler erhalten:

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

kein Fehler:

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

In Webpack 4 mit mehreren Modulregeln würden Sie in Ihrer .js-Regel einfach so etwas tun:

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

Dies ist möglicherweise nicht der Fall bei der ursprünglichen OP-Frage, aber: Wenn Sie die maximale Standardgröße überschreiten, ist dies möglicherweise ein Symptom für ein anderes Problem, das Sie haben. In meinem Fall hatte ich die Warnung, aber schließlich wurde daraus ein FATAL ERROR: MarkCompactCollector: Semi-Space-Kopie, Fallback in der alten Generation. Zuordnung fehlgeschlagen - JavaScript-Heap nicht genügend Speicher. Der Grund war, dass ich das aktuelle Modul dynamisch importiert habe , was zu einer Endlosschleife führte ...