Подготовка проекта к продакшн-сборке — оптимизация и минимизация кода

Оптимизация кода

Удаление неиспользуемого кода: как почистить?

Когда проект растёт, в него нередко попадают куски кода или библиотек, которые "вроде бы пригодятся". Но правда жизни в том, что чаще всего они остаются лежать мёртвым грузом. Это увеличивает размер бандла и замедляет загрузку приложения.

Вот несколько способов, как с этим справиться:

Используем PurgeCSS

PurgeCSS — это инструмент, который помогает определить и удалить неиспользуемые CSS-правила. Например, вы подключили библиотеку Tailwind CSS, но используете только 10% её классов. Остальные 90% можно благополучно выкинуть из финальной сборки.

Пример настройки PurgeCSS в вашем проекте:

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
    require('@fullhuman/postcss-purgecss')({
      content: ['./src/**/*.{js,jsx,ts,tsx,html}'], // файлы, которые нужно сканировать
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [] // регулярка для поиска классов
    }),
  ],
};

Tree-shaking: чистим JavaScript

С JavaScript дело обстоит похожим образом. Tree-shaking — это процесс удаления мёртвого кода (dead code elimination). Всё, что не используется, просто не попадёт в конечный бандл.

Вот пример, как это работает благодаря ES6-модулям:

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// main.js
import { add } from './utils'; // Мы импортируем только "add", а "subtract" не идёт в сборку!
console.log(add(1, 2));

Современные бандлеры, такие как Webpack, уже умеют это делать автоматически — просто убедитесь, что вы используете ES6-модули import/export вместо require.

Подготовка assets: оптимизация изображений

Ну что, кто грузил в проект картинки "по 5 мегабайт каждая"? Признавайтесь. Такие ошибки — частый случай. Но у нас есть выходы:

Используем image-webpack-loader

Если вы используете Webpack, для оптимизации изображений прекрасно подойдёт image-webpack-loader. Он поможет уменьшить их размер без значительной потери качества.

Пример настройки:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 75, // На сколько сильно сжимать JPG
              },
              optipng: {
                enabled: true,
              },
              pngquant: {
                quality: [0.7, 0.9], // Диапазон качества для PNG
                speed: 4,
              },
            },
          },
        ],
      },
    ],
  },
};

Используем WebP

Формат WebP — это современный стандарт изображений от Google. Картинки в этом формате меньше по размеру, но сохраняют высокое качество.

Совет: когда вы добавляете изображения в проект, генерируйте их версии в формате WebP. Существует множество онлайн-инструментов и npm-библиотек для этого, например, sharp.

Минимизация и компрессия

Когда ваш проект уже сияет чистотой, пора переходить к его "схлопыванию". Здесь на помощь приходят такие инструменты, как Webpack, Terser и gzip.

Минимизация JavaScript и CSS

Используем Terser для JavaScript

Terser — это оптимизатор, который удаляет комментарии, сокращает имена переменных и выполняет другие хитрости.

Настройка с использованием Webpack:

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

Используем css-minimizer-webpack-plugin

Для CSS аналогом является плагин css-minimizer-webpack-plugin, который сжимает и оптимизирует ваш стиль:

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      // Минимизация JS
      '...', // Это сохранит настройки Terser, заданные выше
      // Минимизация CSS
      new CssMinimizerPlugin(),
    ],
  },
};

Сжатие с помощью gzip или Brotli

Когда пользователи заходят на ваш сайт, данные передаются с сервера к клиенту. Использование сжатия (например, gzip или Brotli) позволяет снизить объём передаваемых данных.

Настройка gzip

Если вы используете Netlify, всё просто — включите поддержку gzip через конфигурацию. На платформе Vercel Brotli включён по умолчанию.

Для настройки gzip в вашем собственном сервере (например, Express.js):

const express = require('express');
const compression = require('compression');

const app = express();

// Подключаем middleware для gzip
app.use(compression());

app.use(express.static('build'));
app.listen(3000, () => console.log('Сервер работает на порту 3000'));

Практическая подготовка

Давайте проверим, что наш React-проект готов к деплою. Вот основные шаги:

1. Имейте минимальный "чистый" бандл. Убедитесь, что в сборке нет мусора: неиспользуемые библиотеки нужно удалить, а код и изображения сжаты.
2. Тестируйте производительность. Используйте Google Lighthouse или WebPageTest, чтобы оценить скорость загрузки приложения.
3. Проверка временем. Попробуйте протестировать "плохой интернет". Загрузите бандл в условиях ограниченного интернет-соединения.

Теперь вы знаете, как сделать ваш проект максимально лёгким и быстрым. Чем меньше "веса" у приложения, тем больше пользователей захотят им пользоваться (особенно на мобильных устройствах). И да, теперь вы на шаг ближе к тому, чтобы блеснуть своими знаниями на собеседовании. Потому что оптимизация — это не просто навык, это искусство!