什么"代码生成器已经优化了[某些文件]的样式,因为它超过了"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

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

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

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

Answer 2

这似乎是一个巴贝尔错误.我猜你使用了babel-loader,并没有从你的加载器测试中排除外部库.据我所知,这条消息无害,但您仍应该这样做:

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

看一看.是吗？

Answer 3

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

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

Answer 4

我试过里卡多斯图文的方式,但它对我不起作用.最后有效的是在我的.babelrc文件中添加"compact":false:

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

Answer 5

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

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

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

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