What does “The code generator has deoptimised the styling of [some file] as it exceeds the max of ”100KB“” mean?

Question

I added a new npm package to my project and require it in one of my modules.

Now I get this message from webpack,

build modulesNote: The code generator

Answer 1

Either one of the below three options gets rid of the message (but for different reasons and with different side-effects I suppose):

1. exclude the node_modules directory or explicitly include the directory where your app resides (which presumably does not contain files in excess of 100KB)
2. set the Babel option compact to true (actually any value other than "auto")
3. set the Babel option compact to false (see above)

#1 in the above list can be achieved by either excluding the node_modules directory or be explicitly including the directory where your app resides.

E.g. in webpack.config.js:

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

... or by using include: path.resolve(__dirname, 'app/') (again in webpack.config.js).

#2 and #3 in the above list can be accomplished by the method suggested in this answer or (my preference) by editing the .babelrc file. E.g.:

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

Tested with the following 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

Answer 2

This is related to compact option of Babel compiler, which commands to "not include superfluous whitespace characters and line terminators. When set to 'auto' compact is set to true on input sizes of >100KB." By default its value is "auto", so that is probably the reason you are getting the warning message. See Babel documentation.

You can change this option from Webpack using a query parameter. For example:

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

Answer 3

For those who's working with latest webpack and has options property on there configuration. You cannot use query and options at the same time. You will get this error if both is present

Error: Provided options and query in use

Instead, add new property to options name generatorOpts, then add the property compact under it.

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

And for those who's working with next (like me). You need to do something like this

config.module.rules.filter((rule) => rule.use && rule.use.loader === 'next-babel-loader')
.map((loader) => {
    loader.use.options.generatorOpts = { compact: false };
    return loader;
});

Answer 4

in webpack 4 with multiple module rules you would just do something like this in your .js rule:

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

Answer 5

In react/redux/webpack/babel build fixed this error by removing script tag type text/babel

got error:

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

no error:

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

Answer 6

For more explanation read THIS LINK, it is option of Babel compiler that commands to not include superfluous whitespace characters and line terminators. some times ago its threshold was 100KB but now is 500KB.

I proffer you disable this option in your development environment, with this code in .babelrc file.

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

For production environment Babel use the default config which is auto.