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编译器的compact选项有关，它命令“不包括多余的空白字符和行终止符。当设置为'auto'compact时，输入大小为＆gt;时设置为true。 100KB。“默认情况下，其值为”auto“，这可能是您收到警告消息的原因。请参阅Babel documentation。

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

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

Answer 2

这似乎是Babel error。我猜你使用了babel-loader，并没有从你的加载器测试中排除外部库。据我所知，这条消息没有害处，但你仍然应该这样做：

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

看一看。是吗？

Answer 3

以下三个选项中的任何一个都消除了该消息（但出于不同的原因并且我认为有不同的副作用）：

排除node_modules目录或明确include您的应用所在的目录（可能不包含超过100KB的文件）
将Babel option compact设置为true（实际上除“自动”以外的任何值）
将Babel选项compact设置为false（见上文）

＃1可以通过排除node_modules目录或明确包含应用程序所在的目录来实现。

E.g。在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中）。

.babelrc

in this answer

$ 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

我尝试过Ricardo Stuven的方式，但它并没有为我工作。最终有效的是在我的.babelrc文件中添加＆＃34; compact＆＃34;：false：

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

Answer 5

适用于正在使用最新的webpack并且在那里拥有options属性的用户。您不能同时使用query和options。如果两者同时出现，您将得到此错误

Error: Provided options and query in use

相反，将新属性添加到options名称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;
});

Answer 6

有关THIS LINK的更多解释，Babel compiler的选项是的命令不包含多余的空格字符和行终止符。以前的阈值为{{1}但是现在是100KB。

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

.babelrc

对于生产环境{ "env": { "development" : { "compact": false } } }，请使用默认配置Babel。

Answer 7

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

得到错误：

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

没有错误：

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

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

我在使用 video.js 时遇到了同样的问题，添加该特定包为我解决了这个问题。

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

Answer 10

这种警告发生在我身上，并最终出现致命错误：MarkCompactCollector：半空间复制，旧版本中的后备分配失败-JavaScript堆内存不足。原因是我动态导入了 current 模块，所以最终导致了无限循环...

什么“代码生成器已经优化了[某些文件]的样式，因为它超过了”100KB“的最大值？

10 个答案: