“代码生成器使[某些文件]的样式超过了“ 100KB”的最大值时,它已经取消了样式的优化”是什么意思?


164

我向项目添加了一个新的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软件包?
JuhoVepsäläinen2015年

约翰,请确保接受为您解决了这个问题的答案
达娜·伍德曼

Answers:


151

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

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

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

16
而且,如果您有多个加载程序,则可以使用?compact=false而不是query参数。例如:{test: /\.js$/, loaders: ['ng-annotate', 'babel?compact=false']}
kendsnyder

4
也可以将选项添加到.babelrc文件中,以使webpack.config.js文件整洁,例如将{“ compact”:true}添加到.babelrc文件中。
罗恩

3
@Ricardo Stuven但是我为什么要将其更改为false?“不包括多余的空白字符和行终止符”似乎是一件很积极的事情
omriman12 '16

1
@Ben所以基本上我们只在开发时才设置为false?
omriman12年

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

48

这似乎是Babel错误。我猜您正在使用babel-loader,并且没有从加载程序测试中排除外部库。据我所知,该消息无害,但您仍应执行以下操作:

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

看一看。是吗


1
很奇怪,尽管我也看到相同的消息(也适用于ramda)exclude: /node_modules/
罗曼·波米诺夫

同样的路径吗?也许您的外部图书馆位于其他地方?如果没有,您也可以尝试使用里卡多的解决方案。这个问题不是很关键。
mhelvens 2015年

我的错。我正在检查错误的配置。实际的没有exclude
罗曼·波米诺夫

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

22

以下三个选项之一都摆脱了该消息(但由于不同的原因和我认为具有不同的副作用):

  1. 排除node_modules目录或显式排除include应用程序所在的目录(可能不包含超过100KB的文件)
  2. Babel选项 设置compacttrue(实际上是“ auto”以外的任何值)
  3. 将Babel选项设置compactfalse(参见上文)

可以通过排除node_modules目录或显式包括应用程序所在的目录来实现上述列表中的#1 。

例如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

8

我尝试了里卡多·斯图文的方法,但对我来说不起作用。最后起作用的是在我的.babelrc文件中添加了“ compact”:false:

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

1
使用babel 6.5.x,webpack 2,我得到了相同的消息,但对于lodash.js,这解决了该问题。
phil_lgr

来找这个:)
告密者

谢谢,我也有同样的事情
Henkie85

4

要了解更多说明THIS LINK,请选择Babel compiler该命令不包含多余的空格字符和行终止符。以前的门槛是以前,100KB但现在是500KB

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

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

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


2

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

出现错误:

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

没有错误:

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

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

1

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


这对我来说是一个症状-我开始删除/添加导入以尝试对其进行跟踪。令人反感的脚本使用了动态的require(require('../../../' + a + '/' + b))。删除它可以解决问题(并且它将永远不会返回)。
法兰克

不知道为什么不赞成这样做,这正是我的问题。谢谢shmuel!
阿伦
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.