代码生成器已经对[某些文件]的样式进行了非优化，因为它超过了“100KB"的意思吗?

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

这是什么意思?我需要采取一些行动吗?

162562 次浏览
小开

这似乎是一个巴别塔的错误。我猜您使用babel-loader，并且没有从加载器测试中排除外部库。据我所知，这条信息是无害的，但你仍然应该这样做:

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

看一看。是这样吗?

小开
最佳答案

这与Babel编译器的compact选项有关，它命令，不包含多余的空白字符和行结束符。当设置为“auto”时，在输入大小为>100KB时，compact设置为true。”默认值为"auto"，所以这可能是你得到警告消息的原因。看到巴别塔的文档。

你可以在Webpack中使用查询参数来改变这个选项。例如:

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

以下三个选项中的任何一个都可以摆脱信息(但我认为原因和副作用不同):

  1. 排除node_modules目录或显式地include应用程序所在的目录(假定不包含超过100KB的文件)
  2. 将巴别塔的选择 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
小开

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

有错误:

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

没有错误:

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

我试过里卡多·斯图文的方法，但对我没用。最终起作用的是在我的.babelrc文件中添加"compact": false:

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

要了解更多的解释，请阅读Babel Options - compact，它是Babel compiler的选项，在一段时间前命令不包含多余的空格字符和行结束符。，其阈值是100KB，但现在是500KB。

我为您提供在您的开发环境中禁用此选项，使用.babelrc文件中的此代码。

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

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

小开
这可能不是原来OP问题的情况，但是:如果你超过了默认的最大大小，这可能是你有其他问题的症状。在我的情况下，我有警告，但最终它变成了一个致命错误:MarkCompactCollector:半空间复制，回调在旧代分配失败- JavaScript堆出内存。 原因是我动态导入了当前的模块，所以这以一个无休止的循环结束
小开

在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
}
},
小开

对于那些使用最新的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;
});
小开

我有同样的问题与视频.js，添加特定的包解决了我的问题。

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

这是我的通天塔结构:

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

提交答案