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 has deoptimised the styling of "D:/path/to/project/node_modules/ramda/dist/ramda.js" as it exceeds the max of "100KB".

What does it mean? Do I need to take some action?

Zero

Answer 1

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

Sailfish

And if you have multiple loaders, you can use ?compact=false instead of the query parameter. For example: {test: /\.js$/, loaders: ['ng-annotate', 'babel?compact=false']} – Disestablish

@Ricardo Stuven but why would i change it to false? seems like a positive thing to "not include superfluous whitespace characters and line terminators" – Inedited

@Inedited It depends on how you're going to use the output. If it's a production build which is going to be minified, then there's no value in setting this parameter to false. For cases like mine where the format of the output is important, that has value. Like most things, it depends. :) – Selfcontained

Does compaction effect performance? – Parabolize

Answer 2

This seems to be a Babel error. I'm guessing you use babel-loader, and are not excluding external libraries from your loader test. As far as I can tell, the message is not harmful, but you should still do something like this:

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

Have a look. Was that it?

Sabol

Weird, I see same message (also for ramda), although I do exclude: /node_modules/. – Corpus

Same path, also? Maybe your external library is located elsewhere? If not, you could also try Ricardo's solution. This problem is not very critical. – Sabol

My bad. I was checking wrong config. The actual one didn't have exclude. – Corpus

I found this answer better. Thanks @Sabol – Dumond

It works,so we should exlude /node_modules/, i exclude also /dist/ for any case.Upvoted. – Gracious

Answer 3

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
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]

Hammock

Answer 4

I tried Ricardo Stuven's way but it didn't work for me. What worked in the end was adding "compact": false to my .babelrc file:

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

Dodecagon

Using babel 6.5.x, webpack 2, I had the same message but for lodash.js, and this fixed the issue. – Caprification

Came looking for this :) – Farland

Thanks, I had the exact same thing – Topper

Answer 5

For more explanation read Babel Options - compact, 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.

Spittle

Answer 6

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;
});

Pneumectomy

Answer 7

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>

Inhospitality

Answer 8

This is maybe not the case of original OP question, but: if you exceeds the default max size, this maybe a symptom of some other issue you have. in my case, I had the warrning, but finally it turned into a FATAL ERROR: MarkCompactCollector: semi-space copy, fallback in old gen Allocation failed - JavaScript heap out of memory. the reason was that i dynamically imported the current module, so this ended up with an endless loop...

Pulmonary

It was a symptom for me - I started removing/adding my imports to try and track it down. The offending script was using a dynamic require(require('../../../' + a + '/' + b)). Removing it solved the issue (and it shall never return). – Graphology

Not sure why this was downvoted, this was exactly my issue. Thanks shmuel! – Spinoza

Answer 9

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

Aniline

Answer 10

This is my babel configuration:

module.exports = {
  presets: [['@babel/preset-env'], ['@babel/preset-react']],
  plugins: [
    [
      '@babel/plugin-transform-runtime',
      {
        corejs: 3,
      },
    ],
    // react hmr
    ['react-refresh/babel'],
  ],
};

I also met this problem because these code:

    [
      '@babel/plugin-transform-runtime',
      {
        corejs: 3,
      },
    ],

And finally I solved this problem by add

exclude: /node_modules/ 

in

      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },

Daft

same error, and exclude: /node_modules/ fix the problem thanks – Larine

Answer 11

I had the same issue with video.js, Adding that specific package fixed the issue for me.

exclude: devMode ? /node_modules/ : [
/node_modules\/video.js/, /@babel(?:\/|\\{1,2})runtime|core-js/],

Atul

Answer 12

It indicates that your code generator (likely a JavaScript bundler like Webpack or a JavaScript minifier) has encountered a large amount of styling information, and it has deoptimized or altered the way it's handling this information due to its size.

To solve it, Minify your CSS code to reduce its size. You can use a tool like cssnano to automatically minify your CSS.

npm install cssnano --save-dev

Then, use it in your build process, for example, with Webpack:

const cssnano = require('cssnano');

module.exports = {
  // ... other webpack config settings
  plugins: [
    // ... other plugins
    new MiniCssExtractPlugin(),
    new OptimizeCSSAssetsPlugin({
      cssProcessor: cssnano,
      cssProcessorPluginOptions: {
        preset: ['default', { discardComments: { removeAll: true } }],
      },
    }),
  ],
};

Mediate