"The code generator has deoptimised the styling of [some file] as it exceeds the max of "100KB"" 是什么意思？

Question

我向我的项目添加了一个新的 npm 包，并在我的一个模块中需要它。

现在我从 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".

这是什么意思？我需要采取一些行动吗？

Answer 1

这似乎是 Babel error。我猜你使用了 babel-loader，并且没有从你的加载器测试中排除外部库。据我所知，该消息并无害处，但您仍应执行以下操作：

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

看看。是吗？

Answer 2

这与Babel编译器的compact选项有关，它命令"not include superfluous whitespace characters and line terminators. When set to 'auto' compact is set to true on input sizes of >100KB."默认它的值为"auto"，所以可能是您收到警告消息的原因。参见 Babel documentation。

您可以使用 query parameter 从 Webpack 更改此选项。例如：

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

Answer 3

以下三个选项中的任何一个都可以删除消息（但我想出于不同的原因和不同的副作用）：

排除 node_modules 目录或明确 include 您的应用程序所在的目录（大概不包含超过 100KB 的文件）
将 Babel option compact 设置为 true （实际上是 "auto" 以外的任何值）
将 Babel 选项 compact 设置为 false（见上文）

上面列表中的#1 可以通过排除 node_modules 目录或明确包含您的应用程序所在的目录来实现。

例如在 webpack.config.js:

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

... 或使用 include: path.resolve(__dirname, 'app/')（再次在 webpack.config.js 中）。

上面列表中的#2 和#3 可以通过建议的方法或（我的偏好）通过编辑 .babelrc 文件来完成。例如：

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

使用以下设置进行测试：

$ 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 4

在 react/redux/webpack/babel 构建中通过删除脚本标记类型修复了此错误 text/babel

出现错误：

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

没有错误：

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

Answer 5

我尝试了 Ricardo Stuven 的方法，但它对我不起作用。最终起作用的是将 "compact": false 添加到我的 .babelrc 文件中：

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

Answer 6

有关更多解释，请阅读 Babel Options - compact，Babel compiler 的选项命令 不包括多余的空白字符和行终止符。 前段时间阈值是 100KB，但现在是 500KB。

我建议您在开发环境中禁用此选项，并在 .babelrc 文件中使用此代码。

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

对于生产环境 Babel 使用默认配置 auto。

Answer 7

这可能不是原始 OP 问题的情况，但是：如果您超过了默认的最大大小，这可能是您遇到的其他问题的症状。在我的例子中，我收到了警告，但最后它变成了一个致命错误：MarkCompactCollector: semi-space copy, fallback in old gen Allocation failed - JavaScript heap out of memory。原因是我动态导入了 current 模块，所以这以无限循环结束...

Answer 8

在具有多个模块规则的 webpack 4 中，您只需在 .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
     }
},

Answer 9

对于那些使用最新 webpack 并且配置有 options 属性的人。您不能同时使用 query 和 options。如果两者都存在，您将收到此错误

Error: Provided options and query in use

相反，将新的属性添加到其下的 options 名称 generatorOpts, then add the property compact。

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

对于那些与 next 一起工作的人（比如我）。你需要做这样的事情

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

Answer 10

我遇到了与 video.js 相同的问题，添加那个特定的包解决了我的问题。

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

Answer 11

这是我的 babel 配置：

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

我也遇到了这个问题，因为这些代码：

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

最后我通过添加解决了这个问题

exclude: /node_modules/

在

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

"The code generator has deoptimised the styling of [some file] as it exceeds the max of "100KB"" 是什么意思？

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

webpack

babeljs