Что такое tree shaking?

1️⃣ Как кратко ответить

Tree shaking — это техника оптимизации, используемая в сборщиках модулей, таких как Webpack, для удаления неиспользуемого кода из JavaScript-бандлов. Она анализирует зависимости и исключает мертвый код, что уменьшает размер конечного файла и улучшает производительность приложения.

2️⃣ Подробное объяснение темы

Tree shaking — это процесс, который помогает оптимизировать JavaScript-приложения, удаляя неиспользуемый код из бандлов. Эта техника особенно полезна в современных приложениях, где используются модули ES6 (ES2015) и более поздние версии.

Зачем это нужно?

В процессе разработки приложения разработчики часто импортируют библиотеки и модули, но не всегда используют все их функции. Tree shaking позволяет автоматически определить и удалить те части кода, которые не используются, что приводит к уменьшению размера бандла и, следовательно, к более быстрой загрузке и лучшей производительности приложения.

Как это работает?

Tree shaking основывается на статическом анализе кода. Это означает, что сборщик модулей, такой как Webpack, анализирует структуру импортов и экспортов в коде, чтобы определить, какие части кода действительно используются, а какие можно удалить.

Пример

Рассмотрим простой пример с использованием ES6 модулей:

// math.js
export function add(a, b) {
  return a + b;
}
​
export function subtract(a, b) {
  return a - b;
}

// app.js
import { add } from './math';
​
console.log(add(2, 3));

В этом примере у нас есть два модуля. В math.js экспортируются две функции: add и subtract. В app.js мы импортируем и используем только функцию add.

Как работает tree shaking:

1. Импорт и анализ: Сборщик модулей анализирует app.js и видит, что из math.js импортируется только функция add.
2. Удаление неиспользуемого кода: Поскольку функция subtract не используется в app.js, она будет удалена из финального бандла.
3. Оптимизация: В результате, в итоговом бандле будет только код, необходимый для работы функции add, что уменьшает его размер.

Где применяется?

Tree shaking применяется в сборщиках модулей, таких как Webpack, Rollup и Parcel. Эти инструменты поддерживают tree shaking из коробки, если вы используете ES6 модули. Это делает их мощными инструментами для оптимизации современных JavaScript-приложений.

Как включить tree shaking в Webpack?

Чтобы использовать tree shaking в Webpack, убедитесь, что:

• Вы используете ES6 модули (import/export).
• В webpack.config.js установлено mode: 'production', так как tree shaking по умолчанию включен в режиме производства.

Пример конфигурации Webpack:

// webpack.config.js
module.exports = {
  mode: 'production',
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

Tree shaking — это важная часть процесса оптимизации, которая помогает разработчикам создавать более быстрые и эффективные веб-приложения, удаляя ненужный код и уменьшая размер бандлов.