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

165

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ć?

Johan Alkstål
źródło
Czy możesz gdzieś umieścić konfigurację Webpacka? O jaki pakiet NPM chodzi?
Juho Vepsäläinen
Johan, pamiętaj, aby przyjąć odpowiedź, która rozwiązała ten problem
Dana Woodman

Odpowiedzi:

151

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} }
]
Ricardo Stuven
źródło
17
A jeśli masz wiele ?compact=falseprogramów ładujących, możesz użyć zamiast queryparametru. Na przykład:{test: /\.js$/, loaders: ['ng-annotate', 'babel?compact=false']}
kendsnyder
4
możemy również dodać opcję do pliku .babelrc, aby plik webpack.config.js był czysty, np. dodaj {"compact": true} do pliku .babelrc.
Ron,
3
@Ricardo Stuven, ale dlaczego miałbym zmienić to na fałszywe? Wydaje się, że pozytywną rzeczą jest „
unikanie
1
@Ben więc w zasadzie ustawilibyśmy fałsz tylko podczas programowania?
omriman
2
@ omriman12 To zależy od tego, jak zamierzasz wykorzystać dane wyjściowe. Jeśli jest to kompilacja produkcyjna, która ma zostać zminimalizowana, ustawienie tego parametru na nie ma żadnej wartości false. W przypadkach takich jak mój, w których format wyniku jest ważny, ma to wartość. Jak większość rzeczy, to zależy. :)
Ben
48

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?

mhelvens
źródło
1
Dziwne, widzę ten sam komunikat (także dla ramdy), chociaż widzę exclude: /node_modules/.
Roman Pominov
Ta sama ścieżka też? Może Twoja zewnętrzna biblioteka znajduje się gdzie indziej? Jeśli nie, możesz również wypróbować rozwiązanie Ricardo. Ten problem nie jest bardzo krytyczny.
mhelvens
Mój błąd. Sprawdzałem złą konfigurację. Właściwy nie miał exclude.
Roman Pominov
Ta odpowiedź jest lepsza. Dzięki @mhelvens
Mosia Thabo
22

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
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
Marcus Junius Brutus
źródło
8

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"]
}
Yusinto Ngadiman
źródło
1
Używając babel 6.5.x, webpack 2, otrzymałem tę samą wiadomość, ale dla lodash.js, i to rozwiązało problem.
phil_lgr
Szukałem tego :)
informator
Dzięki, miałem dokładnie to samo
Henkie85
4

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.

AmerllicA
źródło
2

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>
Vitaliy Kotov
źródło
1

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
     }
},
steev
źródło
1

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

Shmuel Friedman
źródło
To był dla mnie symptom - zacząłem usuwać / dodawać import, aby spróbować go wyśledzić. Obrażający skrypt używał dynamicznej funkcji require ( require('../../../' + a + '/' + b)). Usunięcie go rozwiązało problem (i nigdy nie wróci).
Frank
Nie jestem pewien, dlaczego ten głos został odrzucony, to był dokładnie mój problem. Dzięki shmuel!
Aron