Apa yang dimaksud dengan "Pembuat kode telah mendeoptimisasi gaya [beberapa file] karena melebihi maks" 100KB ""?

Saya menambahkan paket npm baru ke proyek saya dan memerlukannya di salah satu modul saya.

Sekarang saya mendapatkan pesan ini dari 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".

Apa artinya? Apakah saya perlu mengambil tindakan?

Ini terkait dengan compactopsi Babel compiler, yang memerintahkan untuk "tidak menyertakan karakter spasi putih berlebihan dan terminator garis. Ketika diatur ke 'auto' compact diatur ke true pada ukuran input> 100KB." Secara default nilainya "otomatis", jadi mungkin itulah alasan Anda menerima pesan peringatan. Lihat dokumentasi Babel .

Anda dapat mengubah opsi ini dari Webpack menggunakan parameter kueri . Sebagai contoh:

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

Ini tampaknya merupakan kesalahan Babel . Saya kira Anda menggunakan babel-loader, dan tidak termasuk perpustakaan eksternal dari tes loader Anda. Sejauh yang saya tahu, pesan itu tidak berbahaya, tetapi Anda tetap harus melakukan sesuatu seperti ini:

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

Silahkan lihat. Benarkah itu?

Salah satu dari tiga opsi di bawah ini menghilangkan pesan (tetapi karena alasan berbeda dan dengan efek samping yang berbeda saya kira):

1. kecualikan node_modulesdirektori atau secara eksplisitinclude direktori tempat aplikasi Anda berada (yang mungkin tidak mengandung file lebih dari 100KB)
2. atur opsi Babel compact ke true(sebenarnya nilai apa pun selain "otomatis")
3. atur opsi Babel compactke false(lihat di atas)

# 1 dalam daftar di atas dapat dicapai dengan mengecualikan node_modulesdirektori atau secara eksplisit termasuk direktori tempat aplikasi Anda berada.

Misal dalam webpack.config.js:

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

... atau dengan menggunakan include: path.resolve(__dirname, 'app/')(lagi dalam webpack.config.js).

# 2 dan # 3 dalam daftar di atas dapat dicapai dengan metode yang disarankan dalam jawaban ini atau (preferensi saya) dengan mengedit .babelrcfile. Misalnya:

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

Diuji dengan pengaturan berikut:

$ 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

Saya mencoba cara Ricardo Stuven tetapi tidak berhasil bagi saya. Apa yang berhasil pada akhirnya adalah menambahkan "compact": false ke file .babelrc saya:

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

Untuk penjelasan lebih lanjut baca THIS LINK, itu adalah opsi Babel compilerbahwa perintah untuk tidak memasukkan karakter spasi putih berlebihan dan terminator garis. beberapa waktu yang lalu ambangnya adalah 100KBtetapi sekarang 500KB.

Saya menawarkan Anda menonaktifkan opsi ini di lingkungan pengembangan Anda, dengan kode ini dalam .babelrcfile.

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

Untuk lingkungan produksi Babelgunakan konfigurasi default yang auto.

Dalam reaksi / redux / webpack / babel build memperbaiki kesalahan ini dengan menghapus jenis tag tag teks / babel

mendapat kesalahan:

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

tidak ada kesalahan:

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

di webpack 4 dengan beberapa aturan modul Anda hanya akan melakukan sesuatu seperti ini di aturan .js Anda:

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

Ini mungkin bukan kasus pertanyaan OP asli, tetapi: jika Anda melebihi ukuran maks default, ini mungkin merupakan gejala dari beberapa masalah lain yang Anda miliki. dalam kasus saya, saya memiliki peringatan, tetapi akhirnya berubah menjadi KESALAHAN FATAL: MarkCompactCollector: salinan semi-ruang, mundur dalam gen lama Alokasi gagal - JavaScript menumpuk di memori. alasannya adalah bahwa saya secara dinamis mengimpor modul saat ini , jadi ini berakhir dengan loop tanpa akhir ...