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

164

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?

Johan Alkstål
quelle
Können Sie Ihre Webpack-Konfiguration irgendwo ablegen? Was ist das fragliche NPM-Paket?
Juho Vepsäläinen
Johan, stellen Sie sicher, dass Sie die Antwort akzeptieren, die dies für Sie gelöst hat
Dana Woodman

Antworten:

151

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} }
]
Ricardo Stuven
quelle
16
Und wenn Sie mehrere Lader haben, können Sie ?compact=falseanstelle des queryParameters verwenden. Zum Beispiel:{test: /\.js$/, loaders: ['ng-annotate', 'babel?compact=false']}
Kendnyder
4
Außerdem können wir der .babelrc-Datei die Option hinzufügen, um die Datei webpack.config.js sauber zu machen, z. B. {. compact ": true} zur .babelrc-Datei hinzufügen.
Ron
3
@ Ricardo Stuven, aber warum sollte ich es in false ändern? scheint eine positive Sache zu sein, "keine überflüssigen Leerzeichen und Zeilenendezeichen
einzuschließen
1
@ Ben also im Grunde würden wir nur bei der Entwicklung auf false setzen?
Omriman12
2
@ omriman12 Es hängt davon ab, wie Sie die Ausgabe verwenden. Wenn es sich um einen Produktions-Build handelt, der minimiert werden soll, ist es nicht sinnvoll, diesen Parameter auf zu setzen false. Für Fälle wie meinen, in denen das Format der Ausgabe wichtig ist, hat das Wert. Wie die meisten Dinge kommt es darauf an. :)
Ben
48

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

mhelvens
quelle
1
Seltsam, ich sehe die gleiche Nachricht (auch für Ramda), obwohl ich es tue exclude: /node_modules/.
Roman Pominov
Gleicher Weg auch? Vielleicht befindet sich Ihre externe Bibliothek woanders? Wenn nicht, können Sie auch Ricardos Lösung ausprobieren. Dieses Problem ist nicht sehr kritisch.
Mhelvens
Mein Fehler. Ich habe die falsche Konfiguration überprüft. Der eigentliche hatte nicht exclude.
Roman Pominov
Ich fand diese Antwort besser. Danke @mhelvens
Mosia Thabo
22

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
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
Marcus Junius Brutus
quelle
8

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"]
}
Yusinto Ngadiman
quelle
1
Mit babel 6.5.x, Webpack 2, hatte ich die gleiche Nachricht, aber für lodash.js, und dies behebt das Problem.
phil_lgr
Kam auf der Suche nach diesem :)
Informant
Danke, ich hatte genau das Gleiche
Henkie85
4

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.

AmerllicA
quelle
2

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>
Vitaliy Kotov
quelle
1

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
     }
},
steev
quelle
1

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

Shmuel Friedman
quelle
Es war ein Symptom für mich - ich begann meine Importe zu entfernen / hinzuzufügen, um sie aufzuspüren. Das fehlerhafte Skript verwendete ein dynamisches require ( require('../../../' + a + '/' + b)). Durch das Entfernen wurde das Problem behoben (und es wird niemals zurückkehren).
Frank
Ich bin mir nicht sicher, warum dies abgelehnt wurde, das war genau mein Problem. Danke shmuel!
Aron