Co oznacza „Generator kodu zdezoptymalizował stylizację [jakiegoś pliku], ponieważ przekracza on maksymalny limit„ 100 KB ””?

Dodałem nowy pakiet npm do mojego projektu i wymagam go w jednym z moich modułów.

Teraz otrzymuję tę wiadomość z webpacka,

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

Co to znaczy? Czy muszę coś zrobić?

Jest to związane z compactopcją kompilatora Babel, która nakazuje „nie dołączać zbędnych białych znaków i terminatorów linii. Po ustawieniu na 'auto' kompaktowanie jest ustawiane na true dla wielkości wejściowych> 100KB”. Domyślnie jego wartość to „auto”, więc prawdopodobnie jest to powód, dla którego otrzymujesz komunikat ostrzegawczy. Zobacz dokumentację Babel .

Możesz zmienić tę opcję z pakietu Webpack za pomocą parametru zapytania . Na przykład:

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

Wygląda na to, że jest to błąd Babel . Domyślam się, że używasz programu ładującego babel i nie wykluczasz bibliotek zewnętrznych z testu programu ładującego. O ile wiem, wiadomość nie jest szkodliwa, ale nadal powinieneś zrobić coś takiego:

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

Spójrz. Czy to było to?

Każda z poniższych trzech opcji usuwa komunikat (ale przypuszczam z różnych powodów iz różnymi skutkami ubocznymi):

1. wyklucz node_moduleskatalog lub wyraźnie includekatalog, w którym znajduje się Twoja aplikacja (który prawdopodobnie nie zawiera plików przekraczających 100 KB)
2. ustaw opcję Babel compact na true(właściwie dowolną wartość inną niż „auto”)
3. ustaw opcję Babel compactna false(patrz wyżej)

Numer 1 na powyższej liście można osiągnąć, wykluczając node_moduleskatalog lub jawnie włączając katalog, w którym znajduje się Twoja aplikacja.

Np. W webpack.config.js:

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

... lub używając include: path.resolve(__dirname, 'app/')(ponownie w webpack.config.js).

Punkty 2 i 3 na powyższej liście można osiągnąć metodą sugerowaną w tej odpowiedzi lub (moje preferencje) edytując .babelrcplik. Na przykład:

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

Przetestowano z następującą konfiguracją:

$ 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

Próbowałem sposobu Ricardo Stuvena, ale to nie zadziałało. W końcu zadziałało dodanie „compact”: false do mojego pliku .babelrc:

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

Aby przeczytać więcej wyjaśnień THIS LINK, istnieje opcja Babel compilertych poleceń, aby nie dołączać zbędnych białych znaków i terminatorów linii. jakiś czas temu jego próg był, 100KBale teraz jest 500KB.

Proponuję wyłączyć tę opcję w środowisku programistycznym, z tym kodem w .babelrcpliku.

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

W środowisku produkcyjnym Babelużyj domyślnej konfiguracji, czyli auto.

W kompilacji react / redux / webpack / babel naprawiono ten błąd poprzez usunięcie tagu typu text / babel

dostałem błąd:

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

żaden błąd:

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

w pakiecie webpack 4 z wieloma regułami modułów po prostu zrobiłbyś coś takiego w swojej regule .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
     }
},

Może tak nie jest w przypadku oryginalnego pytania OP, ale: jeśli przekroczysz domyślny maksymalny rozmiar, może to być objaw innego problemu. w moim przypadku miałem ostrzeżenie, ale ostatecznie zmieniło się to w KRYTYCZNY BŁĄD: MarkCompactCollector: kopia w połowie spacji, powrót do starej generacji Alokacja nie powiodła się - sterta JavaScript zabrakło pamięci. powodem było to, że dynamicznie zaimportowałem bieżący moduł, więc skończyło się na niekończącej się pętli ...