¿Qué significa "El generador de código ha desestimulado el estilo de [algún archivo] ya que excede el máximo de" 100 KB ""?

Agregué un nuevo paquete npm a mi proyecto y lo requiero en uno de mis módulos.

Ahora recibo este mensaje 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é significa eso? ¿Necesito tomar alguna acción?

Esto está relacionado con la compactopción del compilador de Babel, que ordena "no incluir caracteres de espacio en blanco superfluos y terminadores de línea. Cuando se establece en 'auto' compacto se establece en verdadero en tamaños de entrada de> 100 KB". De forma predeterminada, su valor es "auto", por lo que probablemente esa sea la razón por la que recibe el mensaje de advertencia. Ver la documentación de Babel .

Puede cambiar esta opción desde Webpack utilizando un parámetro de consulta . Por ejemplo:

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

Esto parece ser un error de Babel . Supongo que usa babel-loader y no excluye bibliotecas externas de su prueba de cargador. Por lo que puedo decir, el mensaje no es dañino, pero aún debe hacer algo como esto:

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

Echar un vistazo. ¿Fue eso?

Cualquiera de las tres opciones siguientes elimina el mensaje (pero supongo que por diferentes razones y con diferentes efectos secundarios):

1. excluya el node_modulesdirectorio o explícitamente includeel directorio donde reside su aplicación (que presumiblemente no contiene archivos de más de 100 KB)
2. establezca la opción de Babel compact en true(en realidad cualquier valor que no sea "auto")
3. configura la opción de Babel compacten false(ver arriba)

# 1 en la lista anterior se puede lograr excluyendo el node_modulesdirectorio o incluyendo explícitamente el directorio donde reside su aplicación.

Ej. En webpack.config.js:

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

... o usando include: path.resolve(__dirname, 'app/')(nuevamente en webpack.config.js).

# 2 y # 3 en la lista anterior se pueden lograr mediante el método sugerido en esta respuesta o (mi preferencia) editando el .babelrcarchivo. P.ej:

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

Probado con la siguiente configuración:

$ npm ls --depth 0 | grep babel
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]

Traté a la manera de Ricardo Stuven pero no funcionó para mí. Lo que funcionó al final fue agregar "compact": false a mi archivo .babelrc:

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

Para leer más explicaciones THIS LINK, es una opción de Babel compileresos comandos no incluir caracteres de espacios en blanco superfluos y terminadores de línea. Hace algunas veces su umbral era 100KBpero ahora lo es 500KB.

Le ofrezco que deshabilite esta opción en su entorno de desarrollo, con este código en el .babelrcarchivo.

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

Para el entorno de producción, Babeluse la configuración predeterminada que es auto.

En react / redux / webpack / babel build se corrigió este error al eliminar el tipo de etiqueta de script text / babel

tiene error:

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

No hay error:

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

en webpack 4 con múltiples reglas de módulo, simplemente haría algo como esto en su regla .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
     }
},

Tal vez este no sea el caso de la pregunta OP original, pero: si excede el tamaño máximo predeterminado, esto puede ser un síntoma de algún otro problema que tenga. en mi caso, tuve la advertencia, pero finalmente se convirtió en un ERROR FATAL: MarkCompactCollector: copia de semi-espacio, fallback en la antigua generación. La asignación falló - JavaScript no tiene memoria. la razón fue que importé dinámicamente el módulo actual , por lo que esto terminó con un bucle sin fin ...