“Kod üreticisi,“ 100KB “” değerinin maks. Değerini aştığı için [bazı dosyaların] stilinin deoptimize edilmesini ne ifade eder?

Projeme yeni bir npm paketi ekledim ve modüllerimden birinde gerekli.

Şimdi bu mesajı web paketinden alıyorum,

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".

Bu ne demek? Bir şey yapmam gerekiyor mu?

Bu, "gereksiz boşluk karakterlerini ve satır sonlandırıcılarını içermeyencompact komutlar . Varsayılan olarak değeri "otomatik" tir, bu nedenle uyarı mesajını almanızın nedeni budur. Babel belgelerine bakın .

Bu seçeneği bir sorgu parametresi kullanarak Webpack'ten değiştirebilirsiniz . Örneğin:

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

Bu bir Babil hatası gibi görünüyor . Babel loader kullandığınızı tahmin ediyorum ve harici kütüphaneleri loader testinizden hariç tutmuyorsunuz. Anlayabildiğim kadarıyla, mesaj zararlı değil, ama yine de böyle bir şey yapmalısınız:

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

Bir bak. Öyle miydi?

Aşağıdaki üç seçenekten biri mesajdan kurtulur (ancak farklı nedenlerle ve farklı yan etkilerle) sanırım:

1. node_modulesdizini veya açıkça includeuygulamanızın bulunduğu dizini hariç tutun (muhtemelen 100 KB'tan fazla dosya içermez)
2. set Babel seçeneği compact ile true( "auto" dışında aslında hiçbir değer)
3. Babil seçeneğini şu compactşekilde ayarlayın false(yukarıya bakın)

Yukarıdaki listede yer alan # 1, node_modulesdizin hariç tutularak veya uygulamanızın bulunduğu dizini açıkça ekleyerek elde edilebilir.

Örneğin webpack.config.js:

let path = require('path');
....
module: {
     loaders: [
          ...
          loader: 'babel',
          exclude: path.resolve(__dirname, 'node_modules/')

... veya kullanarak include: path.resolve(__dirname, 'app/')(tekrar içeri webpack.config.js).

Yukarıdaki listedeki # 2 ve # 3, bu cevapta önerilen yöntemle veya (tercihim) .babelrcdosyayı düzenleyerek gerçekleştirilebilir . Örneğin:

$ cat .babelrc 
{
    "presets": ["es2015", "react"],
    "compact" : true
}

Aşağıdaki kurulumla test edilmiştir:

$ 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'in yolunu denedim ama benim için işe yaramadı. Sonunda işe yarayan "compact" ekliyordu: .babelrc dosyama false:

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

Daha fazla açıklama THIS LINKiçin, Babel compilerbu komutların gereksiz boşluk karakterlerini ve satır sonlandırıcılarını içermemesidir. bazı zamanlar önce eşiği vardı 100KBama şimdi 500KB.

Bu kodu .babelrcdosyasındayken geliştirme ortamınızda bu seçeneği devre dışı bırakmanızı öneririm .

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

Üretim ortamı Babeliçin varsayılan yapılandırmayı kullanın auto.

Reat / redux / webpack / babel derlemesinde, komut dosyası etiketi türü metin / babel kaldırılarak bu hata düzeltildi

hata var:

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

hata yok:

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

birden fazla modül kuralına sahip webpack 4'te .js kuralınızda böyle bir şey yaparsınız:

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

Bu belki orijinal OP sorusu için geçerli değildir, ancak: varsayılan maksimum boyutu aşarsanız, bu belki başka bir sorunun belirtisidir. benim durumumda, warrning vardı, ama sonunda bir FATAL HATA dönüştü: MarkCompactCollector: yarı boşluk kopya, eski gende düşüş başarısız oldu - JavaScript yığın bellek. nedeni dinamik olarak mevcut modülü ithal oldu , bu yüzden bu sonsuz bir döngü ile sona erdi ...