Про що ця стаття "Англійська для розробників Rollup Bundler"?

Словник для розробників, які налаштовують Rollup — дерево- тряскання, вивід ESM, додатки і розділення коду — для команд, які обговорюють збірку бібліотек англійською мовою.

Чи безкоштовна ця стаття?

Так. Усі статті на CoderSlingo, включно з цією, доступні безкоштовно без реєстрації.

Коли опубліковано цю статтю?

Цю статтю опубліковано у 2026 році.

Англійська для розробників Rollup Bundler

Розмови щодо згортання зосереджені навколо одного повторюваного питання: « чому цей мертвий код досі у пакунку? » Для того, щоб дати точну відповідь на це питання, потрібно знати слова про побічні ефекти і межі модулів, а не просто « той, хто робить пакунки, поводиться дивно »

Базовий комплект

** Tree- shaking ** — процес статичного аналізу імпорту/ експорту модулів ES для вилучення коду, який ніколи не використовується, зберігаючи кінцевий збір меншим.

“Це імпортування не використовується у цьому файлі, але дерево- тряскання не може його вилучити, оскільки модуль має побічні ефекти, які пакувальник не може довести, що їх безпечно пропускати.”

ESM output — виробництво збірки в форматі ECMAScript Module (за допомогою import / export ), на відміну від CommonJS або UMD, який є форматом, навколо якого Rollup був спочатку побудований і все ще обробляє найкраще.

“Ми публікуємо цю бібліотеку з виведенням ESM як основним форматом — це те, що робить дерево-штовхування можливим для будь-кого, хто його споживає.”

** Побічний ефект ** — код, який виконує деякі дії, які можна спостерігати за межами простого експортування значень (наприклад, змінює глобальне значення або виконує його під час імпортування), що заважає програмі збирання пакетів безпечно вилучити його, навіть якщо експорт не використовується.

“Позначте цей файл як без побічних ефектів в package.json тільки якщо ви впевнені — якщо він таємно лає глобальну, дерево-стресування його звільнить споживачів.”

Додатки і налаштування

** Додаток ** — частина коду, яка прив’ язується до конвеєра збирання Rollup для перетворення коду, розв’ язання імпорту, що не є JS, або додавання нетипової поведінки (наприклад, обробка CSS або TypeScript).

“Без додатка TypeScript, Rollup не має уявлення, що робити з файлом .ts — він просто бачить невідоме розширення.”

Зовнішня залежність — пакунок явно виключений з пакунка і залишений як import для розв’ язання власним пакувальником або часом виконання користувача, звичайний для бібліотек, які не повинні з’ єднувати свої власні залежності.

“Позначте react як зовнішній — ми не хочемо, щоб кожен користувач цієї бібліотеки відправляв свою власну копію React всередині нашого набору.”

** Вхідна точка ** — файл (або файли) збірки починає пересування по графі залежностей з цієї точки, визначаючи, що насправді є доступним — і, отже, включеним — у вивід.

“Ніщо в цьому файлі не буде правильно перенесено, якщо його неможливо досягти з точки входу — зараз це мертвий код, про існування якого пакувальник навіть не знає.”

Форма виводу

** Code-splitting ** — розбиття пакету на декілька вихідних шматків, часто вздовж динамічних import() меж, так що користувачі завантажують тільки те, що даний шлях коду дійсно потребує.

“Цей динамічний імпорт повинен створити окремий шматок — якщо він все ще потрапляє до головного пакунка, перевірте налаштування розділення коду.”

** Чунк ** — один з декількох можливих файлів виводу, які створює Rollup, на відміну від єдиного монолітного з’ єднання; спільні залежності між точками входу часто витягуються у їх власний шматок.

“Тут є три частини, оскільки дві точки входу мають спільну залежність. Збірка витягнута самостійно.”

Поширені помилки

Звинувачення дерева- тряску за проблему розміру згортка без перевірки, чи не має модуль, що викликає проблему, побічних ефектів, які заважають вилученню.
Забув позначити залежності від інших користувачів як зовнішні, що призвело до того, що бібліотека посилає дублікати таких фреймворків, як React, у своєму власному пакунку.
Припустимо, що всі дані, доступні з будь- якого файла, буде перенесено у дерево, коли навіть буде проаналізовано лише код, доступний з оголошеної точки входу.

Практичні вправи

Поясніть у двох реченнях, чому позначення залежності як зовнішньої має значення для опублікованої бібліотеки.
Написати короткий коментар PR, в якому буде вказано, що надмірний розмір збірки є відсутнім налаштуванням external, а не помилкою, що викликає тремтіння дерева.
Створити чернетку повідомлення з поясненням, чому файл з глобальними побічними ефектами не можна безпечно пересунути, навіть якщо його експорт виглядає не використовуваним.

Зв’язані ресурси

Національний гідрографічний інститут: опис та описові матеріали

Основний словник Rollup - такі терміни як “tree-shaking”, “ESM”, “code-splitting”, і різні налаштування плагінів - є міцним фундаментом. Однак, успішне використання цієї термінології ефективно в межах спільного середовища розробки вимагає більше, ніж просто знати визначення; це розуміння тонких нюансів спілкування, які виникають при обговоренні технічних рішень з колегами, особливо з тими, чия перша мова не є англійською. Простий переклад « оптимізувати розмір пакета » може не впоратися з цим. Замість цього, розробникам потрібно навчитися, як формувати пропозиції і відповідати на зворотній зв’язок таким чином, щоб вони були ясними, конструктивними і демонстрували дух співпраці.

Розглянемо такий сценарій: ви витратили ранок на ретельне налаштування Rollup з додатком terser для агресивного мінімізування вашого коду JavaScript. Пізніше, під час перегляду коду, ваш колега по команді, Alex, залишає коментар до вашого запиту на збирання: « Це виглядає добре, але ви * впевнені * щодо всієї цієї мініфікації? Це може негативно вплинути на продуктивність під час виконання в деяких середовищах. » Просте відкидання його занепокоєння з « Я оптимізував це! » не є продуктивним. Лучше было бы сказать что-то вроде: “Спасибо, что отметил это, Алекс. Я використовував terser для агресивного мінімізування коду, але я розумію потенційні наслідки для продуктивності. Чи можете ви розібратися, які середовища вас турбують? Ми могли б дослідити більш обережну конфігурацію або, можливо, виміряти цю зміну конкретно в цих середовищах, щоб оцінити будь-який вплив. ” Зауважте використання фраз на кшталт “флаггінг це”, “розробка на”, і визнання потенційної занепокоєності – вони демонструють повагу до перспективи Алекса і відкривають двері для подальшого обговорення. Аналогічно, коли ви отримуєте критику щодо вашого PR-опису, заява «Я зробив це якомога ясніше» не достатня; більш корисною відповіддю буде «Я ціную відгук на PR-опис. Дозвольте мені переглянути його, щоб включити конкретні деталі про зміни, які я зробив, і чому вони були необхідні для розділення коду - можливо, додавши щось на зразок «Ця зміна вводить розділення коду, щоб поліпшити початкові часи завантаження для менших застосунків»

Крім того, розмови Slack часто вимагають певної точності. Швидке повідомлення на зразок « Виправлено помилку у конфігурації збірки » не є достатнім; у ньому не вистачає контексту і воно може призвести до плутанини. Детальніше повідомлення може бути таким: « Розв’ язано проблему, коли додаток resolveAlias неправильно відображав певні модулі під час налаштування збирання. Я оновив параметри додатка і ретельно перевірив його зі збіркою. Дайте мені знати, якщо ви виявите якісь регресії. “Це демонструє власність, пояснює проблему і запрошує до подальшого вивчення.

# Example: Configuring Terser Plugin with Rollup
# This illustrates how to specify options for minification.
# Note: This is a simplified example; real-world configurations can be more complex.
const rollup = require('rollup')
const terser = require('terser')

const bundle = rollup.createBundle({
  format: 'esm',
  entryModules: ['src/index.js'],
  plugins: [
    {
      name: 'terser',
      setup(bundle) {
        bundle.write('dist/bundle.js', {
          format: 'es',
          terserOptions: {
            compress: {
              drop_console: true,
              ie8: false, // Disable IE8 support
            },
          },
        })
      }
    }
  ]
})

module.exports = bundle;

Врешті-решт, оволодіння словником Rollup є лише частиною рівняння. Вміння ефективно спілкуватися про це - визнання проблем, надання пояснень і співпраця з вашою командою - значно сприяє більш плавне і продуктивне процесу розробки. Це про будівництво мостів через чітке і продумане спілкування, а не просто розгортання оптимізованого коду.