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 »»?

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?

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

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?

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]

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

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.

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>

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

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