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


164

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?


Bisakah Anda menempatkan konfigurasi Webpack Anda di suatu tempat? Apa paket NPM yang dimaksud?
Juho Vepsäläinen

Johan, pastikan untuk menerima jawaban yang memecahkan ini untuk Anda
Dana Woodman

Jawaban:


151

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

16
Dan jika Anda memiliki beberapa loader, Anda dapat menggunakan ?compact=falsebukan queryparameter. Misalnya:{test: /\.js$/, loaders: ['ng-annotate', 'babel?compact=false']}
kendsnyder

4
kita juga dapat menambahkan opsi ke file .babelrc untuk membuat file webpack.config.js bersih, seperti menambahkan {"compact": true} ke file .babelrc.
Ron

3
@ Ricardo Stuven tetapi mengapa saya mengubahnya menjadi false? sepertinya hal yang positif untuk "tidak termasuk karakter spasi putih berlebihan dan terminator garis"
omriman12

1
@ Ben jadi pada dasarnya kita akan menetapkan false hanya ketika berkembang?
omriman12

2
@ omriman12 Tergantung pada bagaimana Anda akan menggunakan output. Jika ini adalah build produksi yang akan diperkecil, maka tidak ada nilai dalam pengaturan parameter ini false. Untuk kasus seperti milik saya di mana format output penting, yang memiliki nilai. Seperti kebanyakan hal, itu tergantung. :)
Ben

48

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?


1
Aneh, saya melihat pesan yang sama (juga untuk ramda), meskipun saya lakukan exclude: /node_modules/.
Roman Pominov

Jalur yang sama, juga? Mungkin perpustakaan eksternal Anda berada di tempat lain? Jika tidak, Anda juga dapat mencoba solusi Ricardo. Masalah ini tidak terlalu kritis.
mhelvens

Salahku. Saya sedang memeriksa konfigurasi yang salah. Yang sebenarnya tidak punya exclude.
Roman Pominov

Saya menemukan jawaban ini lebih baik. Terima kasih @mhelvens
Mosia Thabo

22

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

8

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"]
}

1
Menggunakan babel 6.5.x, webpack 2, saya memiliki pesan yang sama tetapi untuk lodash.js, dan ini memperbaiki masalah.
phil_lgr

Datang mencari ini :)
informan

Terima kasih, saya memiliki hal yang persis sama
Henkie85

4

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.


2

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>

1

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

1

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


Itu adalah gejala bagi saya - saya mulai menghapus / menambahkan impor saya untuk mencoba dan melacaknya. Skrip yang menyinggung menggunakan memerlukan dinamis ( require('../../../' + a + '/' + b)). Menghapusnya memecahkan masalah (dan tidak akan pernah kembali).
Frank

Tidak yakin mengapa ini dibatalkan, ini adalah masalah saya. Terima kasih shmuel!
Aron
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.