Que signifie «Le générateur de code a désoptimisé le style de [un fichier] car il dépasse le maximum de« 100 Ko »»?

165

J'ai ajouté un nouveau package npm à mon projet et je l'exige dans l'un de mes modules.

Maintenant, je reçois ce message de 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".

Qu'est-ce que ça veut dire? Dois-je prendre des mesures?

Johan Alkstål
la source
Pouvez-vous mettre votre configuration Webpack quelque part? Quel est le package NPM en question?
Juho Vepsäläinen
Johan, assurez-vous d'accepter la réponse qui a résolu cela pour vous
Dana Woodman

Réponses:

151

Ceci est lié à l' compactoption du compilateur Babel, qui commande de "ne pas inclure les caractères d'espacement et les terminateurs de ligne superflus. Lorsqu'il est défini sur 'auto', compact est défini sur true pour les tailles d'entrée> 100 Ko." Par défaut, sa valeur est "auto", c'est donc probablement la raison pour laquelle vous recevez le message d'avertissement. Voir la documentation Babel .

Vous pouvez modifier cette option à partir de Webpack à l'aide d'un paramètre de requête . Par exemple:

loaders: [
    { test: /\.js$/, loader: 'babel', query: {compact: false} }
]
Ricardo Stuven
la source
17
Et si vous avez plusieurs chargeurs, vous pouvez utiliser à la ?compact=falseplace du queryparamètre. Par exemple:{test: /\.js$/, loaders: ['ng-annotate', 'babel?compact=false']}
kendsnyder
4
nous pouvons également ajouter l'option au fichier .babelrc pour rendre le fichier webpack.config.js propre, comme ajouter {"compact": true} au fichier .babelrc.
Ron
3
@Ricardo Stuven mais pourquoi devrais-je le changer en faux? semble être une chose positive de "ne pas inclure les espaces et les terminateurs de ligne superflus"
omriman12
1
@Ben donc fondamentalement, nous ne définirions false que lors du développement?
omriman12
2
@ omriman12 Cela dépend de la façon dont vous allez utiliser la sortie. Si c'est une version de production qui va être minifiée, il n'y a aucune valeur à définir ce paramètre sur false. Pour les cas comme le mien où le format de la sortie est important, cela a de la valeur. Comme la plupart des choses, cela dépend. :)
Ben
48

Cela semble être une erreur de Babel . Je suppose que vous utilisez babel-loader et que vous n'excluez pas les bibliothèques externes de votre test de chargeur. Pour autant que je sache, le message n'est pas dangereux, mais vous devez quand même faire quelque chose comme ceci:

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

Regarde. C'était ça?

mhelvens
la source
1
Bizarre, je vois le même message (également pour ramda), bien que je le fasse exclude: /node_modules/.
Roman Pominov
Même chemin, aussi? Peut-être que votre bibliothèque externe est située ailleurs? Sinon, vous pouvez également essayer la solution de Ricardo. Ce problème n'est pas très critique.
mhelvens
Ma faute. Je vérifiais une mauvaise configuration. Le vrai n'en avait pas exclude.
Roman Pominov
J'ai trouvé cette réponse meilleure. Merci @mhelvens
Thabo
22

L'une ou l'autre des trois options ci-dessous élimine le message (mais pour des raisons différentes et avec différents effets secondaires, je suppose):

  1. exclure le node_modulesrépertoire ou explicitement includele répertoire où réside votre application (qui ne contient probablement pas de fichiers de plus de 100 Ko)
  2. définissez l' option Babel compact sur true(en fait toute valeur autre que "auto")
  3. définissez l'option Babel compactsur false(voir ci-dessus)

Le n ° 1 dans la liste ci-dessus peut être obtenu en excluant le node_modulesrépertoire ou en incluant explicitement le répertoire où réside votre application.

Par exemple dans webpack.config.js:

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

... ou en utilisant include: path.resolve(__dirname, 'app/')(à nouveau dans webpack.config.js).

# 2 et # 3 dans la liste ci-dessus peuvent être accomplis par la méthode suggérée dans cette réponse ou (ma préférence) en éditant le .babelrcfichier. Par exemple:

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

Testé avec la configuration suivante:

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

J'ai essayé la méthode de Ricardo Stuven mais cela n'a pas fonctionné pour moi. Ce qui a fonctionné à la fin a été d'ajouter "compact": false à mon fichier .babelrc:

{
    "compact": false,
    "presets": ["latest", "react", "stage-0"]
}
Yusinto Ngadiman
la source
1
En utilisant babel 6.5.x, webpack 2, j'avais le même message mais pour lodash.js, et cela a résolu le problème.
phil_lgr
Je suis venu chercher ça :)
informateur
Merci, j'ai eu exactement la même chose
Henkie85
4

Pour plus d'explications, lisez THIS LINK, l'option de Babel compilerces commandes est de ne pas inclure les caractères d'espacement et les terminateurs de ligne superflus. il y a quelques temps, son seuil était 100KBmais est maintenant500KB .

Je vous propose de désactiver cette option dans votre environnement de développement, avec ce code dans le .babelrcfichier.

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

Pour l'environnement de production, Babelutilisez la configuration par défaut qui est auto.

AmerllicA
la source
2

Dans react / redux / webpack / babel build corrige cette erreur en supprimant le type de balise de script text / babel

obtenu une erreur:

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

pas d'erreur:

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

dans webpack 4 avec plusieurs règles de module, vous feriez juste quelque chose comme ceci dans votre règle .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
la source
1

Ce n'est peut-être pas le cas de la question OP d'origine, mais: si vous dépassez la taille maximale par défaut, cela peut être le symptôme d'un autre problème que vous rencontrez. dans mon cas, j'ai eu la guerre, mais finalement cela s'est transformé en une ERREUR FATALE: MarkCompactCollector: copie semi-espace, le repli dans l'ancienne génération Allocation a échoué - JavaScript tas de mémoire. la raison était que j'ai importé dynamiquement le module actuel , donc cela s'est terminé avec une boucle sans fin ...

shmuel friedman
la source
C'était un symptôme pour moi - j'ai commencé à supprimer / ajouter mes importations pour essayer de les retrouver. Le script incriminé utilisait un require ( require('../../../' + a + '/' + b)) dynamique . Le supprimer a résolu le problème (et il ne reviendra jamais).
Frank
Je ne sais pas pourquoi cela a été refusé, c'était exactement mon problème. Merci shmuel!
Aron le