“代码生成器对 [some file] 的样式进行了优化，因为它超过了“100KB”的最大值”是啥意思？

Posted 2023-02-22

【中文标题】“代码生成器对 [some file] 的样式进行了优化，因为它超过了“100KB”的最大值”是啥意思？

【英文标题】：What does "The code generator has deoptimised the styling of [some file] as it exceeds the max of "100KB"" mean?“代码生成器对 [some file] 的样式进行了优化，因为它超过了“100KB”的最大值”是什么意思？

【发布时间】：2015-06-17 01:15:47

【问题描述】：

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

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

【问题讨论】：

你能把你的 Webpack 配置放在某个地方吗？有问题的 NPM 包是什么？

约翰，请务必接受为您解决此问题的答案

【参考方案1】：

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

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

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

【讨论】：

如果你有多个加载器，你可以使用?compact=false而不是query参数。例如：test: /\.js$/, loaders: ['ng-annotate', 'babel?compact=false']

我们也可以在 .babelrc 文件中添加选项以使 webpack.config.js 文件干净，例如在 .babelrc 文件中添加 "compact": true。

@Ricardo Stuven 但我为什么要把它改成假的？ “不包括多余的空白字符和行终止符”似乎是一件好事

@Ben 所以基本上我们只会在开发时设置为 false 吗？

@omriman12 这取决于您将如何使用输出。如果是要缩小的生产版本，则将此参数设置为false 没有任何价值。对于像我这样输出格式很重要的情况，这是有价值的。像大多数事情一样，这取决于。 :)

【参考方案2】：

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

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

看看。是这样吗？

【讨论】：

奇怪，我看到了同样的信息（也适用于 ramda），虽然我看到了exclude: /node_modules/。

同样的路径，也一样吗？也许您的外部图书馆位于其他地方？如果没有，您也可以尝试 Ricardo 的解决方案。这个问题不是很严重。

我的错。我正在检查错误的配置。实际没有exclude。

我发现这个答案更好。谢谢@mhelvens

它有效，所以我们应该排除 /node_modules/，我也排除 /dist/ 对于任何情况。Upvoted。

【参考方案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 可以通过in this answer 建议的方法或（我的偏好）通过编辑.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

【参考方案4】：

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

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

【讨论】：

使用 babel 6.5.x，webpack 2，我收到了相同的消息，但对于 lodash.js，这解决了问题。

来找这个 :)

谢谢，我有完全相同的东西

【参考方案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;
);

【参考方案6】：

更多解释请阅读Babel Options - compact，Babel compiler 的选项不包含多余的空白字符和行终止符的命令。 以前它的阈值是100KB，但现在是@ 987654325@.

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

    "env": 
      "development" : 
        "compact": false
      
    

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

【参考方案7】：

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

出现错误：

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

没有错误：

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

【参考方案8】：

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

【讨论】：

这对我来说是一种症状——我开始删除/添加我的导入来尝试追踪它。有问题的脚本使用了动态 require(require('../../../' + a + '/' + b))。删除它解决了问题（它永远不会返回）。

不知道为什么这被否决了，这正是我的问题。谢谢 shmuel！

【参考方案9】：

在具有多个模块规则的 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
     
,

【参考方案10】：

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

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