Що означає "Генератор коду деоптимізував стиль [деякого файлу], оскільки він перевищує максимум" 100 КБ ""?

Я додав новий пакет npm до свого проекту і вимагаю його в одному з моїх модулів.

Тепер я отримую це повідомлення з 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".

Що це означає? Чи потрібно вжити певних дій?

Це пов'язано з compactможливістю компілятора Babel, який командує "не включати зайві символи пробілу та термінали рядків. Якщо встановлено значення" auto ", компактний показник встановлений на" true "на вхідні розміри> 100 КБ". За замовчуванням його значення "auto", так що, ймовірно, саме тому ви отримуєте попереджувальне повідомлення. Дивіться документацію Babel .

Ви можете змінити цю опцію з Webpack, використовуючи параметр запиту . Наприклад:

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

Це здається помилкою Бабеля . Я здогадуюсь, що ви використовуєте babel-loader, і не виключаєте зовнішніх бібліотек із тесту завантажувача. Наскільки я можу сказати, повідомлення не шкідливо, але ви все одно повинні зробити щось подібне:

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

Подивитися. Це було?

Будь-який із наведених нижче трьох варіантів позбавиться від повідомлення (але, мабуть, з різних причин та з різними побічними ефектами):

1. виключіть node_modulesкаталог або явно includeкаталог, де знаходиться ваша програма (яка, імовірно, не містить файлів, що перевищують 100 КБ)
2. встановіть опцію Babel compact на true(фактично будь-яке значення , відмінне від «авто»)
3. встановити опцію Babel compactдо false(див вище)

№1 у наведеному вище списку можна досягти, виключивши node_modulesкаталог або чітко включивши каталог, де знаходиться ваше додаток.

Наприклад webpack.config.js:

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

... або за допомогою include: path.resolve(__dirname, 'app/')(знову в webpack.config.js).

№2 та №3 у наведеному вище списку можна виконати методом, запропонованим у цій відповіді, або (мої переваги) шляхом редагування .babelrcфайлу. Наприклад:

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

Тестовано з наступним налаштуванням:

$ 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

Я спробував Рікардо Стувена, але це не вийшло мені. Зрештою, додалося "компактне": false у мій файл .babelrc:

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

Для більш детального пояснення читайте THIS LINK, що це Babel compilerкоманда, щоб не включати зайві символи пробілу та термінали рядків. кілька разів тому її поріг був, 100KBале зараз є 500KB.

Я пропоную вам відключити цю опцію у вашому середовищі розробки, з цим кодом у .babelrcфайлі.

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

Для виробничого середовища Babelвикористовуйте конфігурацію за замовчуванням, яка є auto.

При складанні react / redux / webpack / babel виправлено цю помилку, видаливши текст тега сценарію / babel

помилка:

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

без помилок:

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

у вебпаку 4 з кількома модульними правилами ви просто зробите щось подібне у своєму .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
     }
},

Можливо, це не стосується оригінального питання щодо ОП, але: якщо ви перевищуєте максимальний розмір за замовчуванням, це може бути симптомом якоїсь іншої проблеми. у моєму випадку я мав попередження, але, нарешті, воно перетворилося на ВІДПОВІДНУ ПОМИЛУ: MarkCompactCollector: копія напівпробілу, резервна копія у старій грі. Виділення не вдалося - JavaScript зберіг пам'ять. Причина полягала в тому, що я динамічно імпортував поточний модуль, і це закінчилося безкінечним циклом ...