192

我在我的项目中添加了一个新的 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".

这是什么意思？我需要采取一些措施吗？

4

11 回答 11

167

这与compactBabel 编译器的选项有关，该选项命令“不包括多余的空白字符和行终止符。当设置为 'auto' 时，在输入大小 > 100KB 时紧凑设置为 true。” 默认情况下，它的值为“auto”，因此这可能是您收到警告消息的原因。请参阅Babel 文档。

您可以使用查询参数从 Webpack 更改此选项。例如：

loaders: [
    { test: /\.js$/, loader: 'babel', query: {compact: false} }
]
于 2015-04-24T20:59:40.640 回答
55

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

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

看一看。是这样吗？

于 2015-04-24T18:10:52.680 回答
28

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

  1. 排除您的应用程序所在的node_modules目录或明确include的目录（大概不包含超过 100KB 的文件）
  2. 将Babel 选项 compact设置为true（实际上是“auto”以外的任何值）
  3. 将 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
于 2016-04-01T15:28:14.757 回答
12

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

{
    "compact": false,
    "presets": ["latest", "react", "stage-0"]
}
于 2016-11-09T10:19:39.973 回答
4

有关更多解释，请阅读Babel Options -compact，Babel compiler该命令的选项是不包含多余的空白字符和行终止符。以前它的门槛是，100KB但现在是500KB。

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

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

对于生产环境Babel，使用默认配置，即auto.

于 2018-04-26T18:31:33.867 回答
4

对于那些正在使用最新版本webpack并在该配置上拥有options财产的人。您不能同时使用query和options。如果两者都存在，您将收到此错误

Error: Provided options and query in use

相反，将新属性添加到optionsname generatorOpts，然后在其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;
});
于 2020-10-23T08:02:17.310 回答
2

在 react/redux/webpack/babel build 通过删除脚本标签类型 text/babel 修复了这个错误

得到错误：

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

没有错误：

<script src="/js/bundle.js"></script>
于 2016-07-25T20:22:55.773 回答
2

这可能不是原始 OP 问题的情况，但是：如果您超过默认的最大大小，这可能是您遇到的其他问题的症状。就我而言，我收到了警告，但最终它变成了一个致命错误：MarkCompactCollector：半空间复制，旧代分配失败 - JavaScript 堆内存不足。原因是我动态导入了当前模块，所以这最终导致了一个无限循环......

于 2018-10-28T12:43:55.107 回答
1

在具有多个模块规则的 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
     }
},
于 2018-12-13T19:38:45.947 回答
1

这是我的 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'],
      },
于 2022-02-11T13:32:49.243 回答
0

我对 video.js 也有同样的问题，添加那个特定的包为我解决了这个问题。

exclude: devMode ? /node_modules/ : [
/node_modules\/video.js/, /@babel(?:\/|\\{1,2})runtime|core-js/],
于 2021-04-14T04:44:16.457 回答