web-dev-qa-db-ja.com

「コードジェネレータが「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".

どういう意味ですか？何らかの措置を講じる必要がありますか。

webpackbabeljs
146
Johan Alkstål

これはBabelコンパイラのcompactオプションに関連しており、コマンドに余分な空白文字と行末文字を含めないでください。 'auto'に設定すると、100KBを超える入力サイズではcompactがtrueに設定されます。 "デフォルトではその値は" auto "なので、おそらくそれがあなたが警告メッセージを受け取る理由です。 Babelのドキュメント をご覧ください。

あなたは query parameter を使ってWebpackからこのオプションを変更することができます。例えば：

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

これは バベルエラー のようです。私はあなたがbabel-loaderを使っていて、ローダーテストから外部ライブラリを除外していないと思います。私が言うことができる限りでは、メッセージは有害ではありません、しかしあなたはまだこのような何かをするべきです：

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

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

43
mhelvens

以下の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
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
18
Marcus Junius Brutus

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

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

より詳しい説明を読むために THIS LINK 、へのコマンドは余分な空白を含まないのがBabel compilerのオプション文字と行の終端文字。前にそのしきい値は100KBでしたが、今は500KBです。

このコードを.babelrcファイルに入れて、開発環境でこのオプションを無効にしてください。

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

実稼働環境では、Babelはデフォルトのconfig（auto）を使用します。

4
AmerllicA

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

エラーが発生しました：

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

エラーなし

<script src="/js/bundle.js"></script>
2
Vitaliy Kotov

この警告は私に起こり、ついに致命的なエラーが発生しました：MarkCompactCollector：セミスペースコピー、古いgenでのフォールバックその理由は、私がcurrentモジュールを動的にインポートしたため、これが無限ループになってしまいました...

0
shmuel friedman

複数のモジュールルールを持つ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
     }
},
0
steev