「コードジェネレーターが[一部のファイル]のスタイル設定を最適化解除したため、「100KB」の最大値を超えたのはなぜですか？

プロジェクトに新しいnpmパッケージを追加し、モジュールの1つにそれを必要としました。

今、私はこのメッセージを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".

どういう意味ですか？何かアクションを起こす必要がありますか？

これはcompactBabelコンパイラーのオプションに関連しており、「余分な空白文字と行末記号を含めないようにコマンドします。「自動」に設定すると、コンパクトは、> 100KBの入力サイズでtrueに設定されます。デフォルトでは、その値は「auto」であるため、おそらく警告メッセージが表示されます。Babelのドキュメントを参照してください。

このオプションは、クエリパラメータを使用してWebpackから変更できます。例えば：

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

これはBabelエラーのようです。バベルローダーを使用していると思いますが、ローダーテストから外部ライブラリを除外していません。私の知る限り、メッセージは有害ではありませんが、次のようなことを行う必要があります。

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

見てください。それでしたか？

以下の3つのオプションのいずれかがメッセージを取り除きます（ただし、さまざまな理由により、さまざまな副作用があると思います）。

1. node_modulesディレクトリを除外するかinclude、アプリが存在するディレクトリを明示的に除外します（おそらく100KBを超えるファイルは含まれていません）。
2. 設定バベルオプションが compactにtrue（「自動」以外の実際の任意の値）
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

Ricardo Stuvenの方法を試しましたが、うまくいきませんでした。最後に機能したのは、.babelrcファイルに "compact"：falseを追加することでした。

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

詳細な説明を読むために、余計な空白文字や行末記号を含めないTHIS LINKことは、Babel compilerそのコマンドのオプションです。以前はそのしきい値でした100KBが、現在はしきい値です500KB。

このコードを.babelrcファイルに含めて、開発環境でこのオプションを無効にすることをお勧めします。

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

本番環境でBabelは、デフォルトの構成であるを使用しますauto。

react / redux / webpack / babelビルドで、スクリプトタグタイプtext / babelを削除してこのエラーを修正しました

エラーが発生しました：

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

エラーなし：

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

複数のモジュールルールを含む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
     }
},

これは、元のOP質問の場合とは異なる可能性がありますが、デフォルトの最大サイズを超えた場合、他の問題の症状である可能性があります。私の場合、警告がありましたが、最終的には致命的なエラーに変わりました：MarkCompactCollector：セミスペースコピー、古い世代の割り当てでのフォールバックに失敗しました-メモリのJavaScriptヒープ。その理由は、現在のモジュールを動的にインポートしたため、これは無限ループに終わってしまいました...